/* ========================================================================== Alesta â€” Premium Light Theme Modern, animasyonlu aÃ§Ä±k tema. Mevcut style.css'i ezmeden baÄŸÄ±msÄ±z Ã§alÄ±ÅŸÄ±r. Sadece olan sayfalarda devreye girer. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); .cl-theme { --cl-blue: #2563eb; --cl-blue-bright: #3b82f6; --cl-blue-dark: #1d4ed8; --cl-navy: #0f1b33; --cl-ink: #16223d; --cl-text: #1e293b; --cl-muted: #64748b; --cl-bg: #f3f6fc; --cl-bg-soft: #eef3fb; --cl-card: #ffffff; --cl-border: #e6ecf6; --cl-shadow: 0 18px 50px -20px rgba(37, 99, 235, 0.28); --cl-shadow-soft: 0 10px 30px -16px rgba(15, 27, 51, 0.18); --cl-radius: 22px; --cl-gold: #f5b300; --cl-green: #16a34a; --cl-red: #ef4444; --cl-discord: #5865f2; font-family: 'Inter', 'Segoe UI', sans-serif; background: var(--cl-bg); color: var(--cl-text); } .cl-theme *, .cl-theme *::before, .cl-theme *::after { box-sizing: border-box; } .cl-theme h1, .cl-theme h2, .cl-theme h3, .cl-theme .cl-heading { font-family: 'Poppins', sans-serif; } .cl-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .cl-eyebrow { color: var(--cl-blue); font-weight: 700; letter-spacing: 3px; font-size: 0.78rem; text-transform: uppercase; margin-bottom: 12px; font-family: 'Poppins', sans-serif; } /* ===== Animated background dots (shared) ===== */ .cl-dotgrid { background-image: radial-gradient(rgba(37, 99, 235, 0.10) 1px, transparent 1.4px); background-size: 26px 26px; } /* ========================================================================== ANNOUNCEMENT BAR ========================================================================== */ .cl-announce { background: linear-gradient(90deg, #2f6bff, #2563eb 50%, #1f5cf0); color: #fff; text-align: center; font-weight: 800; letter-spacing: 1px; font-size: 0.92rem; padding: 11px 50px; position: relative; overflow: hidden; font-family: 'Poppins', sans-serif; } .cl-announce > span, .cl-announce > a { position: relative; z-index: 2; } .cl-announce::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-100%); animation: cl-shine 4.5s ease-in-out infinite; pointer-events: none; } @keyframes cl-shine { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(120%)} } /* Tıklanabilir link */ .cl-announce-link { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; transition: transform .2s ease, letter-spacing .2s ease; } .cl-announce-link:hover { transform: scale(1.02); letter-spacing: 1.2px; } .cl-announce-link:hover .cl-announce-arrow { transform: translateX(4px); } .cl-announce-ico { font-size: 0.95rem; opacity: 0.95; } .cl-announce-arrow { font-size: 0.75rem; opacity: 0.85; transition: transform .25s ease; } .cl-announce-text { display: inline-flex; align-items: center; gap: 10px; } /* Kapat butonu */ .cl-announce-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(255,255,255,0.12); border: 0; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 0.7rem; transition: background .15s ease, transform .15s ease; } .cl-announce-close:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.1); } /* === GECE PAZARI ÖZEL === */ .cl-announce-nm { background: linear-gradient(90deg, #4c1d95 0%, #7c3aed 25%, #db2777 50%, #7c3aed 75%, #4c1d95 100%); background-size: 200% 100%; animation: nm-announce-flow 6s linear infinite; } .cl-announce-nm::before { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); animation: cl-shine 3s ease-in-out infinite; } .cl-announce-nm .cl-announce-ico { filter: drop-shadow(0 0 6px rgba(251, 191, 36, .7)); color: #fbbf24; } @keyframes nm-announce-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @media (max-width: 600px) { .cl-announce { padding: 10px 42px; font-size: 0.78rem; letter-spacing: 0.5px; } .cl-announce-arrow { display: none; } } /* ========================================================================== NAVBAR (light override) ========================================================================== */ .cl-theme .navbar { position: sticky; top: 0; width: 100%; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--cl-border); box-shadow: 0 6px 24px -18px rgba(15, 27, 51, 0.25); padding: 0.5rem 0; z-index: 900; } .cl-theme .navbar .container { max-width: 1320px; } .cl-theme .nav-wrapper { gap: 1.5rem; align-items: center; } /* Logo â€” bÃ¼yÃ¼k ve gÃ¶ze Ã§arpan */ .cl-theme .logo, .cl-theme .cl-nav-brand { color: var(--cl-ink); display: inline-flex; align-items: center; gap: 14px; transition: transform .25s; text-decoration: none; } .cl-theme .logo:hover, .cl-theme .cl-nav-brand:hover { transform: translateY(-1px); } .cl-theme .logo i { color: var(--cl-blue); } .cl-theme .navbar-logo-img, .cl-theme .logo img { height: 110px !important; width: auto; transition: transform .4s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 8px 22px rgba(15,27,51,.22)); } .cl-theme .logo:hover img { transform: rotate(-6deg) scale(1.05); } .cl-theme .cl-nav-brand-text { font-family: 'Poppins', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--cl-ink); letter-spacing: -.01em; line-height: 1; } .cl-theme .cl-nav-brand-mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-dark, #1d4ed8)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; box-shadow: 0 8px 20px -8px rgba(37,99,235,.55); } /* MenÃ¼ linkleri â€” aÃ§Ä±k tema, gri yazÄ±, hover'da koyu */ .cl-theme .nav-menu { margin-left: 2.5rem; gap: 2.2rem; } .cl-theme .nav-menu-link, .cl-theme .nav-menu a { color: var(--cl-muted); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .98rem; border-bottom: none !important; padding: 22px 0; position: relative; transition: color .2s; letter-spacing: .01em; text-decoration: none; } .cl-theme .nav-menu-link i { display: none; } /* Aktif/hover alt Ã§izgi â€” mavi gradient */ .cl-theme .nav-menu-link::after { content: ""; position: absolute; left: 50%; bottom: 12px; height: 4px; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--cl-blue), var(--cl-blue-dark, #1d4ed8)); transform: translateX(-50%); transition: width .3s ease; box-shadow: 0 0 12px rgba(37,99,235,.35); } .cl-theme .nav-menu-link:hover { color: var(--cl-ink); } .cl-theme .nav-menu-link.active { color: var(--cl-blue); } .cl-theme .nav-menu-link.active::after, .cl-theme .nav-menu-link:hover::after { width: 38px; } .cl-theme .nav-buttons { display: flex; gap: 1rem; align-items: center; } .cl-theme .btn-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--cl-bg-soft); border: 1px solid var(--cl-border); color: var(--cl-ink); font-size: 1.15rem; position: relative; transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s; } .cl-theme .btn-icon:hover { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(37,99,235,.45); } /* Pseudo-element badge artÄ±k kullanÄ±lmÄ±yor (span badge var) â€” gizle */ .cl-theme .btn-icon[data-count]::after { display: none; } /* Sepet butonu â€” gerÃ§ek badge span */ .cl-theme .cl-nav-cart-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-dark, #1d4ed8)); color: #fff; font-family: 'Poppins', sans-serif; font-size: 0.72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 6px 14px -4px rgba(37,99,235,.5); animation: cl-cart-pop .35s cubic-bezier(.2,.8,.2,1); } @keyframes cl-cart-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } /* Sepet butonu â€” Ã¶zel hover: mavi vurgulu */ .cl-theme .cl-nav-cart.has-items { border-color: rgba(37,99,235,.3); color: var(--cl-blue); } .cl-theme .cl-nav-cart.has-items:hover { color: #fff; } /* profile pill in navbar */ .cl-theme .nav-profile-trigger { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; background: var(--cl-bg-soft); border: 1px solid var(--cl-border); border-radius: 999px; cursor: pointer; transition: background .25s, transform .25s, border-color .25s, box-shadow .25s; } .cl-theme .nav-profile-trigger:hover { background: #fff; border-color: rgba(37,99,235,.25); box-shadow: 0 8px 18px -10px rgba(37,99,235,.25); transform: translateY(-1px); } .cl-theme .nav-avatar { width: 36px; height: 36px; border-radius: 50%; } .cl-theme .nav-username { color: var(--cl-ink); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.92rem; } .cl-theme .nav-arrow { color: var(--cl-muted); font-size: 0.78rem; } /* GiriÅŸ/KayÄ±t butonlarÄ± */ .cl-theme .btn-login { color: var(--cl-ink); padding: 9px 20px; border-radius: 999px; font-family: 'Poppins', sans-serif; font-weight: 700; text-decoration: none; border: 1px solid var(--cl-border); background: transparent; transition: background .2s, border-color .2s, color .2s; } .cl-theme .btn-login:hover { background: var(--cl-bg-soft); border-color: var(--cl-blue); color: var(--cl-blue); } .cl-theme .btn-register { color: #fff; padding: 9px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-dark, #1d4ed8)); text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(37,99,235,.55); transition: transform .2s, filter .2s; } .cl-theme .btn-register:hover { transform: translateY(-1px); filter: brightness(1.08); } /* Mobile menu toggle aÃ§Ä±k tema */ .cl-theme .mobile-menu-toggle { color: var(--cl-ink); } .cl-theme .nav-profile-wrapper { position: relative; } .cl-theme .nav-profile-dropdown { position: absolute; right: 0; top: calc(100% + 12px); width: 270px; background: #fff; border: 1px solid var(--cl-border); border-radius: 18px; box-shadow: var(--cl-shadow); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .22s, visibility .22s; z-index: 1000; } .cl-theme .nav-profile-wrapper.active .nav-profile-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .cl-theme .profile-dropdown-header { display: flex; gap: 12px; align-items: center; padding: 10px; } .cl-theme .dropdown-avatar { width: 44px; height: 44px; border-radius: 12px; } .cl-theme .dropdown-username { color: var(--cl-ink); font-weight: 700; display: block; } .cl-theme .dropdown-role { font-size: 0.82rem; } .cl-theme .profile-dropdown-divider { height: 1px; background: var(--cl-border); margin: 8px 4px; } .cl-theme .profile-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: var(--cl-text); text-decoration: none; font-weight: 500; transition: background .2s, color .2s; } .cl-theme .profile-dropdown-item:hover { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-theme .profile-dropdown-item i { width: 18px; color: var(--cl-blue); } .cl-theme .profile-item-content { display: flex; flex-direction: column; } .cl-theme .profile-item-label { font-size: 0.72rem; color: var(--cl-muted); } .cl-theme .profile-item-value { font-weight: 700; color: var(--cl-ink); } .cl-theme .dropdown-logout:hover { color: var(--cl-red); } .cl-theme .dropdown-logout:hover i { color: var(--cl-red); } .cl-theme .btn-login, .cl-theme .btn-register { padding: 10px 20px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; } .cl-theme .btn-login { color: var(--cl-ink); border: 1px solid var(--cl-border); } .cl-theme .btn-login:hover { background: var(--cl-bg-soft); } .cl-theme .btn-register { background: var(--cl-blue); color: #fff; box-shadow: var(--cl-shadow); } .cl-theme .btn-register:hover { transform: translateY(-2px); background: var(--cl-blue-dark); } .cl-theme .mobile-menu-toggle { color: var(--cl-ink); font-size: 1.4rem; cursor: pointer; display: none; } /* ========================================================================== BUTTONS (theme generic) ========================================================================== */ .cl-btn { display: inline-flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 700; border: none; cursor: pointer; border-radius: 999px; text-decoration: none; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s; } .cl-btn-lg { padding: 18px 38px; font-size: 1.05rem; } .cl-btn-md { padding: 13px 26px; font-size: 0.98rem; } .cl-btn-primary { background: var(--cl-blue); color: #fff; box-shadow: var(--cl-shadow); } .cl-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 24px 45px -16px rgba(37,99,235,.5); background: var(--cl-blue-dark); } .cl-btn-white { background: #fff; color: var(--cl-navy); box-shadow: 0 20px 50px -18px rgba(15,27,51,.35); } .cl-btn-white:hover { transform: translateY(-3px) scale(1.02); } .cl-btn-discord { background: var(--cl-discord); color: #fff; box-shadow: 0 18px 40px -16px rgba(88,101,242,.6); } .cl-btn-discord:hover { transform: translateY(-3px); background: #4954e6; } .cl-btn-ghost { background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); } .cl-btn-dark { background: #fff; color: var(--cl-navy); } /* ========================================================================== HERO ========================================================================== */ .cl-hero { position: relative; overflow: hidden; text-align: center; padding: 70px 0 110px; background: linear-gradient(180deg, rgba(243,246,252,.55), rgba(243,246,252,.92)), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1600&q=60'); background-size: cover; background-position: center 30%; } .cl-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1.4px); background-size: 24px 24px; pointer-events: none; } .cl-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; } .cl-hero-logo { width: 210px; height: 210px; margin: 0 auto 36px; animation: cl-float 6s ease-in-out infinite; filter: drop-shadow(0 26px 40px rgba(37,99,235,.35)); } .cl-hero-logo img { width: 100%; height: 100%; object-fit: contain; } @keyframes cl-float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(2deg)} } .cl-hero-title { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; font-weight: 900; color: var(--cl-navy); letter-spacing: -1px; text-transform: uppercase; } .cl-hero-title .hl { color: var(--cl-blue); } .cl-hero-desc { margin: 24px auto 38px; max-width: 620px; color: var(--cl-muted); font-size: 1.18rem; line-height: 1.7; } .cl-hero-ip { font-family: 'Poppins', sans-serif; font-size: clamp(1.4rem, 3.5vw, 2.1rem); font-weight: 800; color: var(--cl-navy); background: #fff; border-radius: 999px; padding: 18px 54px; box-shadow: 0 24px 60px -20px rgba(15,27,51,.4); border: 1px solid var(--cl-border); position: relative; } .cl-hero-ip:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 30px 70px -20px rgba(37,99,235,.45); } .cl-hero-ip .copied-flag { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); background: var(--cl-green); color: #fff; padding: 6px 14px; border-radius: 8px; font-size: .8rem; opacity: 0; transition: opacity .25s, transform .25s; } .cl-hero-ip.copied .copied-flag { opacity: 1; transform: translateX(-50%) translateY(-4px); } /* ========================================================================== HERO 2 â€” IP + Logo + Discord (3 sÃ¼tun) + pill nav alt ========================================================================== */ .cl-hero2 { position: relative; overflow: hidden; padding: 70px 0 0; color: #fff; background: linear-gradient(180deg, rgba(15,27,51,.55), rgba(15,27,51,.40) 60%, rgba(15,27,51,.10)), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1800&q=70'); background-size: cover; background-position: center 40%; } .cl-hero2::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 26px 26px; pointer-events: none; } .cl-hero2-wave { position: absolute; bottom: -1px; left: 0; right: 0; height: 90px; background: var(--cl-bg); clip-path: ellipse(75% 100% at 50% 100%); pointer-events: none; } .cl-hero2-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; padding-bottom: 140px; } /* sol blok â€” IP + Kopyala + oyuncu sayÄ±sÄ± */ .cl-hero2-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .cl-hero2-side.right { align-items: flex-end; text-align: right; } .cl-hero2-label { color: #fff; font-family:'Poppins'; font-weight: 800; font-size: 1.25rem; letter-spacing: .5px; } .cl-hero2-label .y { color: #fde047; } .cl-hero2-copy { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: var(--cl-blue); color: #fff; font-family:'Poppins'; font-weight: 800; font-size: 1rem; border: none; cursor: pointer; text-decoration: none; box-shadow: 0 14px 32px -10px rgba(37,99,235,.6); transition: transform .25s, box-shadow .25s, background .25s; position: relative; } .cl-hero2-copy:hover { transform: translateY(-3px); background: var(--cl-blue-dark); box-shadow: 0 20px 40px -10px rgba(37,99,235,.7); } .cl-hero2-copy .copied-flag { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); background: var(--cl-green); color:#fff; padding: 5px 12px; border-radius: 8px; font-size: .78rem; opacity: 0; transition: opacity .25s, transform .25s; } .cl-hero2-copy.copied .copied-flag { opacity: 1; transform: translateX(-50%) translateY(-4px); } .cl-hero2-stat { color: #fff; font-family:'Poppins'; font-weight: 800; font-size: 1.15rem; letter-spacing: .3px; } .cl-hero2-stat .n { color: #fde047; font-size: 1.35rem; margin-right: 4px; } /* orta logo dairesi */ .cl-hero2-logo { width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #60a5fa, #1d4ed8); box-shadow: 0 30px 70px -20px rgba(37,99,235,.6), inset 0 -8px 24px rgba(0,0,0,.18), inset 0 8px 24px rgba(255,255,255,.18); display: grid; place-items: center; position: relative; animation: cl-float 6s ease-in-out infinite; } .cl-hero2-logo::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: linear-gradient(160deg, #93c5fd, #1e40af); } .cl-hero2-logo::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: linear-gradient(180deg, #bfdbfe 0%, #3b82f6 55%, #1e40af 100%); box-shadow: inset 0 6px 18px rgba(255,255,255,.5), inset 0 -10px 22px rgba(0,0,0,.25); } .cl-hero2-logo img { position: relative; z-index: 2; width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); } /* alt pill nav + sepet */ .cl-hero2-navbar { position: relative; z-index: 3; margin: -70px auto 0; max-width: 1000px; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(15,27,51,.35); border: 1px solid var(--cl-border); } .cl-hero2-nav { gap: 4px; flex-wrap: nowrap; overflow-x: auto; } .cl-hero2-nav::-webkit-scrollbar { display: none; } .cl-hero2-nav a { white-space: nowrap; } .cl-hero2-nav { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; } .cl-hero2-nav a { padding: 12px 18px; border-radius: 14px; color: var(--cl-ink); font-weight: 700; text-decoration: none; font-size: .95rem; transition: background .2s, color .2s; } .cl-hero2-nav a:hover { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-hero2-nav a.is-active { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-hero2-nav a.is-cta { background: var(--cl-blue); color: #fff; box-shadow: 0 10px 22px -8px rgba(37,99,235,.55); } .cl-hero2-nav a.is-cta:hover { background: var(--cl-blue-dark); color: #fff; } .cl-hero2-cart { width: 52px; height: 52px; border-radius: 16px; background: var(--cl-blue); color: #fff; display: grid; place-items: center; text-decoration: none; position: relative; box-shadow: 0 12px 28px -10px rgba(37,99,235,.6); transition: transform .2s, background .2s; } .cl-hero2-cart:hover { transform: translateY(-2px); background: var(--cl-blue-dark); } .cl-hero2-cart .count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; background: var(--cl-red); color:#fff; border-radius: 999px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; border: 2px solid #fff; } /* responsive */ @media (max-width: 992px) { .cl-hero2-inner { grid-template-columns: 1fr; text-align: center; gap: 26px; padding-bottom: 120px; } .cl-hero2-side, .cl-hero2-side.right { align-items: center; text-align: center; } .cl-hero2-logo { width: 170px; height: 170px; } } @media (max-width: 640px) { .cl-hero2-navbar { flex-direction: column; padding: 14px; gap: 12px; max-width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; } .cl-hero2-nav { width: 100%; justify-content: center; } .cl-hero2-cart { width: 100%; height: 48px; border-radius: 14px; } .cl-hero2-logo { width: 140px; height: 140px; } } /* ========================================================================== STATS STRIP ========================================================================== */ .cl-stats { background: linear-gradient(120deg, #2f6bff, #2563eb 55%, #1f56e6); padding: 46px 0; position: relative; overflow: hidden; } .cl-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.18), transparent 45%); } .cl-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; color: #fff; position: relative; z-index: 2; } .cl-stat { padding: 6px 12px; position: relative; } .cl-stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 18%; height: 64%; width: 1px; background: rgba(255,255,255,.28); } .cl-stat-ico { font-size: 1.9rem; margin-bottom: 12px; opacity: .9; } .cl-stat-num { font-family: 'Poppins', sans-serif; font-size: clamp(2rem,4vw,2.9rem); font-weight: 900; line-height: 1; } .cl-stat-label { letter-spacing: 2px; font-size: .78rem; font-weight: 600; opacity: .9; margin-top: 8px; text-transform: uppercase; } /* ========================================================================== SECTION SHELL ========================================================================== */ .cl-section { padding: 84px 0; } .cl-section--soft { background: var(--cl-bg-soft); } .cl-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; color: var(--cl-navy); text-transform: uppercase; letter-spacing: -.5px; } .cl-title .hl { color: var(--cl-blue); } .cl-subtitle { color: var(--cl-muted); margin-top: 14px; line-height: 1.7; max-width: 560px; } .cl-center { text-align: center; } .cl-center .cl-subtitle { margin-left: auto; margin-right: auto; } /* ========================================================================== GUIDE CARD ("NasÄ±l KatÄ±labilirim?") ========================================================================== */ .cl-guide-card { background: #fff; border-radius: 30px; box-shadow: var(--cl-shadow); border: 1px solid var(--cl-border); padding: 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } .cl-guide-steps { display: flex; flex-direction: column; gap: 26px; margin-top: 26px; } .cl-step { display: flex; gap: 18px; align-items: flex-start; } .cl-step-num { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--cl-bg-soft); color: var(--cl-blue); display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.1rem; transition: background .3s, color .3s, transform .3s; } .cl-step:hover .cl-step-num { background: var(--cl-blue); color: #fff; transform: scale(1.08); } .cl-step h4 { font-family: 'Poppins', sans-serif; color: var(--cl-navy); font-size: 1.12rem; margin-bottom: 6px; } .cl-step p { color: var(--cl-muted); line-height: 1.6; } .cl-step p .chip { background: var(--cl-bg-soft); color: var(--cl-blue); padding: 2px 8px; border-radius: 6px; font-weight: 700; } .cl-guide-img { display: grid; place-items: center; } .cl-guide-img img { width: 100%; max-width: 320px; animation: cl-float 7s ease-in-out infinite; } /* ========================================================================== DISCORD SECTION ========================================================================== */ .cl-discord { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; } .cl-discord-img { display: grid; place-items: center; } .cl-discord-img img { width: 100%; max-width: 360px; animation: cl-float 6.5s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(15,27,51,.18)); } .cl-discord-text .cl-discord-logo { font-size: 3rem; color: var(--cl-discord); margin-bottom: 18px; } .cl-discord-text h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--cl-navy); font-weight: 800; } .cl-discord-text p { color: var(--cl-muted); margin: 18px 0 30px; line-height: 1.75; max-width: 480px; } /* ========================================================================== STORE CTA BANNER ========================================================================== */ .cl-storecta { background: #fff; border-radius: 30px; border: 1px solid var(--cl-border); box-shadow: var(--cl-shadow-soft); padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; overflow: hidden; } .cl-storecta h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); color: var(--cl-navy); font-weight: 800; text-transform: uppercase; line-height: 1.1; } .cl-storecta p { color: var(--cl-muted); margin: 18px 0 28px; line-height: 1.7; max-width: 420px; } .cl-storecta-art { position: relative; height: 300px; background: var(--cl-bg-soft); border-radius: 22px; display: grid; place-items: center; } .cl-gem-card { position: absolute; width: 180px; background: #fff; border-radius: 18px; box-shadow: 0 24px 50px -22px rgba(15,27,51,.35); padding: 18px; text-align: center; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .cl-gem-card img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 8px; } .cl-gem-card h4 { color: var(--cl-navy); font-family: 'Poppins'; font-size: 1rem; } .cl-gem-card .price { color: var(--cl-blue); font-weight: 800; } .cl-gem-card .price del { color: var(--cl-muted); font-weight: 500; font-size: .85rem; } .cl-gem-card--left { transform: translateX(-110px) rotate(-10deg) scale(.85); opacity: .65; z-index: 1; } .cl-gem-card--right { transform: translateX(110px) rotate(10deg) scale(.85); opacity: .65; z-index: 1; } .cl-gem-card--main { z-index: 3; transform: scale(1.05); } .cl-gem-card--main .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--cl-red); color: #fff; font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .cl-storecta-art:hover .cl-gem-card--main { transform: scale(1.1) translateY(-6px); } .cl-storecta-art:hover .cl-gem-card--left { transform: translateX(-130px) rotate(-12deg) scale(.85); } .cl-storecta-art:hover .cl-gem-card--right { transform: translateX(130px) rotate(12deg) scale(.85); } /* ========================================================================== TOP SUPPORTERS PODIUM ========================================================================== */ .cl-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 22px; align-items: end; margin-top: 48px; max-width: 940px; margin-inline: auto; } .cl-podium-card { background: #fff; border-radius: 20px; border: 1px solid var(--cl-border); box-shadow: var(--cl-shadow-soft); padding: 28px 22px 26px; text-align: center; position: relative; transition: transform .35s, box-shadow .35s; } .cl-podium-card:hover { transform: translateY(-6px); box-shadow: var(--cl-shadow); } .cl-podium-card .rank-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: 1px; font-family: 'Poppins', sans-serif; background: #eef2fb; color: var(--cl-muted); border: 1px solid var(--cl-border); } .cl-podium-card.is-1 { border-top: 4px solid var(--cl-gold); padding-top: 36px; } .cl-podium-card.is-1 .rank-tag { background: var(--cl-gold); color: #5a3d00; border-color: var(--cl-gold); } .cl-podium-card.is-2 { border-top: 4px solid #94a3b8; } .cl-podium-card.is-3 { border-top: 4px solid #c97a2b; } .cl-podium-card.is-3 .rank-tag { background: #fbe7d2; color: #8a4b13; border-color: #f0cba6; } .cl-podium-avatar { width: 84px; height: 84px; border-radius: 18px; margin: 0 auto 16px; box-shadow: 0 12px 26px -12px rgba(15,27,51,.4); } .cl-podium-card.is-1 .cl-podium-avatar { width: 100px; height: 100px; } .cl-podium-name { font-family: 'Poppins'; font-weight: 800; color: var(--cl-navy); font-size: 1.15rem; } .cl-podium-sub { color: var(--cl-blue); font-weight: 600; font-size: .85rem; margin-top: 6px; letter-spacing: 1px; text-transform: uppercase; } .cl-podium-sub i { margin-right: 4px; } /* ========================================================================== MANAGEMENT (dark banner) ========================================================================== */ .cl-mgmt { background: linear-gradient(120deg, #0d1830, #16243f); border-radius: 30px; padding: 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; overflow: hidden; position: relative; box-shadow: 0 30px 60px -30px rgba(13,24,48,.7); } .cl-mgmt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(59,130,246,.22), transparent 55%); } .cl-mgmt-text { position: relative; z-index: 2; } .cl-mgmt-text .cl-eyebrow { color: var(--cl-blue-bright); } .cl-mgmt-text h2 { color: #fff; font-size: clamp(1.7rem,3.5vw,2.5rem); font-weight: 800; line-height: 1.15; } .cl-mgmt-text h2 .hl { color: var(--cl-blue-bright); } .cl-mgmt-text p { color: #aeb9cc; margin: 18px 0 28px; line-height: 1.7; max-width: 440px; } .cl-mgmt-art { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: -10px; } .cl-mgmt-art img { width: 110px; border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); } .cl-mgmt-art img:nth-child(1){ transform: rotate(-6deg) translateY(-10px); z-index:3; } .cl-mgmt-art img:nth-child(2){ transform: rotate(4deg) translateX(-20px); z-index:2; } .cl-mgmt-art img:nth-child(3){ transform: rotate(10deg) translateX(-40px); z-index:1; } /* ========================================================================== SCROLL REVEAL ========================================================================== */ .cl-reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .cl-reveal.in { opacity: 1; transform: translateY(0); } .cl-reveal[data-delay="1"]{ transition-delay:.1s } .cl-reveal[data-delay="2"]{ transition-delay:.2s } .cl-reveal[data-delay="3"]{ transition-delay:.3s } .cl-reveal[data-delay="4"]{ transition-delay:.4s } @media (prefers-reduced-motion: reduce){ .cl-reveal{opacity:1;transform:none} .cl-hero-logo,.cl-discord-img img,.cl-guide-img img{animation:none} } /* ========================================================================== FOOTER (light override) ========================================================================== */ .cl-theme .footer { background: #fff; border-top: 1px solid var(--cl-border); padding: 56px 0 30px; } .cl-theme .footer-shell { color: var(--cl-text); } .cl-theme .footer-logo, .cl-theme .footer-brand-header { color: var(--cl-ink); justify-content: center; display: flex; } .cl-theme .footer-logo-img { height: 50px; } .cl-theme .footer-about-card { background: var(--cl-bg-soft); border:1px solid var(--cl-border); border-radius: 18px; padding: 22px; text-align:center; max-width: 640px; margin: 22px auto 34px; } .cl-theme .footer-about-card h3 { color: var(--cl-navy); font-family:'Poppins'; margin-bottom: 8px; } .cl-theme .footer-about-card p { color: var(--cl-muted); } .cl-theme .footer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; max-width: 720px; margin: 0 auto 30px; text-align: center; } .cl-theme .footer-column h4 { color: var(--cl-navy); font-family:'Poppins'; margin-bottom: 14px; } .cl-theme .footer-column ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .cl-theme .footer-column a { color: var(--cl-muted); text-decoration: none; transition: color .2s; } .cl-theme .footer-column a:hover { color: var(--cl-blue); } .cl-theme .footer-bottom { border-top: 1px solid var(--cl-border); padding-top: 24px; display:flex; flex-direction:column; align-items:center; gap:16px; } .cl-theme .footer-meta-pills { display:flex; gap:10px; } .cl-theme .footer-meta-pill { background: var(--cl-bg-soft); color: var(--cl-muted); padding: 6px 14px; border-radius: 999px; font-size: .85rem; } .cl-theme .footer-social-icons { display:flex; gap:12px; } .cl-theme .footer-social-icon { width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--cl-bg-soft);color:var(--cl-ink);text-decoration:none;transition:all .25s; } .cl-theme .footer-social-icon:hover { background:var(--cl-blue); color:#fff; transform:translateY(-3px); } .cl-theme .footer-copyright { text-align:center; color:var(--cl-muted); font-size:.88rem; } .cl-theme .footer-copyright strong { color: var(--cl-blue); } /* ========================================================================== STORE PAGE (light) ========================================================================== */ .cl-store-hero { background: linear-gradient(180deg, var(--cl-bg-soft), var(--cl-bg)); border-bottom: 1px solid var(--cl-border); padding: 54px 0 46px; } .cl-store-hero .cl-eyebrow { margin-bottom: 6px; } .cl-store-hero h1 { font-size: clamp(2.2rem,5vw,3.4rem); color: var(--cl-navy); font-weight: 900; text-transform: uppercase; } .cl-store-hero p { color: var(--cl-muted); margin-top: 8px; } .cl-breadcrumb { display:flex; align-items:center; gap:10px; color: var(--cl-muted); font-size:.92rem; margin: 30px 0 28px; flex-wrap: wrap; } .cl-breadcrumb a { color: var(--cl-muted); text-decoration:none; display:flex; align-items:center; gap:6px; transition: color .2s; } .cl-breadcrumb a:hover { color: var(--cl-blue); } .cl-breadcrumb .sep { color: #cbd5e1; } .cl-breadcrumb .active { color: var(--cl-ink); font-weight: 700; } .cl-store-layout { display: grid; grid-template-columns: 290px 1fr; gap: 28px; padding-bottom: 70px; align-items: start; } .cl-store-sidebar { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 22px; position: sticky; top: 90px; } .cl-store-sidebar .side-title { display:flex; align-items:center; gap:10px; font-family:'Poppins'; font-weight:800; color: var(--cl-navy); margin-bottom: 16px; } .cl-store-sidebar .side-title i { color: var(--cl-blue); } .cl-side-link { display:flex; align-items:center; gap:12px; padding: 13px 14px; border-radius: 14px; color: var(--cl-text); text-decoration:none; font-weight:600; transition: background .2s, color .2s, transform .2s; } .cl-side-link i:first-child { width:18px; color: var(--cl-muted); transition: color .2s; } .cl-side-link:hover { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-side-link:hover i:first-child { color: var(--cl-blue); } .cl-side-link.active { background: var(--cl-blue); color:#fff; box-shadow: var(--cl-shadow); } .cl-side-link.active i { color:#fff; } .cl-side-link .arrow { margin-left:auto; font-size:.78rem; } .cl-side-sub { display:flex; flex-direction:column; gap:4px; padding: 6px 0 6px 14px; margin-left:8px; border-left:2px solid var(--cl-border); } .cl-side-sublink { display:flex; align-items:center; gap:10px; padding: 9px 12px; border-radius: 10px; color: var(--cl-muted); text-decoration:none; font-size:.92rem; transition: all .2s; } .cl-side-sublink:hover { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-side-sublink.active { color: var(--cl-blue); font-weight:700; background: var(--cl-bg-soft); } .cl-side-divider { height:1px; background: var(--cl-border); margin: 10px 0; } .cl-side-help { margin-top: 18px; background: linear-gradient(135deg, #2f6bff, #2563eb); border-radius: 16px; padding: 18px; color:#fff; } .cl-side-help i { font-size: 1.4rem; margin-bottom: 8px; } .cl-side-help strong { display:block; margin-bottom: 6px; } .cl-side-help a { color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; opacity:.92; } .cl-side-help a:hover { text-decoration: underline; } .cl-store-main .head { display:flex; align-items:center; gap:12px; margin-bottom: 22px; } .cl-store-main .head img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; } .cl-store-main .head .ico { width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--cl-bg-soft);color:var(--cl-blue); } .cl-store-main .head h2 { font-family:'Poppins'; font-weight:800; color: var(--cl-navy); font-size:1.45rem; } /* product / category / server cards */ .cl-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cl-pcard { background:#fff; border:1px solid var(--cl-border); border-radius: 18px; overflow:hidden; box-shadow: var(--cl-shadow-soft); display:flex; flex-direction:column; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; position: relative; } .cl-pcard:hover { transform: translateY(-8px); box-shadow: var(--cl-shadow); } .cl-pcard-media { position: relative; background: linear-gradient(160deg, #f6f9ff, #eef3fb); height: 180px; display:grid; place-items:center; } .cl-pcard-media img { width: 110px; height: 110px; object-fit: contain; transition: transform .4s; filter: drop-shadow(0 14px 22px rgba(15,27,51,.18)); } .cl-pcard:hover .cl-pcard-media img { transform: scale(1.1) rotate(-3deg); } .cl-pcard-media .placeholder { font-size: 3rem; color: #c5d2ec; } .cl-stock-tag { position:absolute; top:14px; left:14px; background: var(--cl-blue); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:1px; padding:6px 12px; border-radius:8px; } .cl-disc-ribbon { position:absolute; top:14px; right:-32px; transform: rotate(45deg); background: var(--cl-red); color:#fff; font-weight:800; font-size:.72rem; padding:6px 40px; box-shadow: 0 6px 14px -6px rgba(239,68,68,.6); } .cl-pcard-body { padding: 22px 20px 24px; text-align:center; display:flex; flex-direction:column; flex:1; } .cl-pcard-body h3 { font-family:'Poppins'; color: var(--cl-navy); font-size:1.2rem; margin-bottom: 14px; } .cl-pcard-price { font-family:'Poppins'; font-weight:800; font-size:1.55rem; color: var(--cl-navy); margin-bottom: 6px; } .cl-pcard-price del { color: var(--cl-muted); font-size:.95rem; font-weight:500; margin-right: 8px; } .cl-pcard-price .now { color: var(--cl-blue); } .cl-pcard-stock { color: var(--cl-green); font-size:.85rem; font-weight:600; margin-bottom: 16px; display:flex; align-items:center; justify-content:center; gap:6px; } .cl-pcard-btn { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; background: var(--cl-blue); color:#fff; border:none; cursor:pointer; padding: 13px; border-radius: 12px; font-weight:700; text-decoration:none; transition: background .25s, transform .25s, box-shadow .25s; font-family:'Poppins'; } .cl-pcard-btn:hover { background: var(--cl-blue-dark); transform: translateY(-2px); box-shadow: var(--cl-shadow); } .cl-list-row { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--cl-border); border-radius:16px; padding:16px 20px; margin-bottom: 14px; text-decoration:none; box-shadow: var(--cl-shadow-soft); transition: transform .25s, box-shadow .25s, border-color .25s; } .cl-list-row:hover { transform: translateX(6px); box-shadow: var(--cl-shadow); border-color: #cdd9f3; } .cl-list-row .thumb { width:62px;height:62px;border-radius:14px;background:var(--cl-bg-soft);display:grid;place-items:center;overflow:hidden; flex:none; } .cl-list-row .thumb img { width:100%;height:100%;object-fit:cover; } .cl-list-row .thumb i { color: var(--cl-blue); font-size:1.4rem; } .cl-list-row .badge { font-size:.66rem; font-weight:800; letter-spacing:1px; color: var(--cl-blue); } .cl-list-row h3 { font-family:'Poppins'; color: var(--cl-navy); font-size:1.15rem; margin-top:4px; } .cl-list-row .go { margin-left:auto; width:42px;height:42px;border-radius:12px;background:var(--cl-bg-soft);color:var(--cl-blue);display:grid;place-items:center;transition:all .25s; } .cl-list-row:hover .go { background: var(--cl-blue); color:#fff; } .cl-empty { text-align:center; padding: 70px 20px; color: var(--cl-muted); background:#fff; border:1px dashed var(--cl-border); border-radius: var(--cl-radius); } .cl-empty i { font-size: 3rem; color: #c5d2ec; margin-bottom: 16px; display:block; } /* store user card */ .cl-store-usercard { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background: linear-gradient(120deg,#fff,#f7faff); border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 22px 26px; margin-bottom: 26px; } .cl-store-usercard .left { display:flex; align-items:center; gap:16px; } .cl-store-usercard .left img { width:60px;height:60px;border-radius:14px; } .cl-store-usercard .welcome { color: var(--cl-blue); font-size:.72rem; letter-spacing:1.5px; font-weight:700; } .cl-store-usercard .name { font-family:'Poppins'; color: var(--cl-navy); font-size:1.3rem; } .cl-store-usercard .role { color: var(--cl-muted); font-size:.85rem; } .cl-store-usercard .right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .cl-store-usercard .bal-label { color: var(--cl-muted); font-size:.7rem; letter-spacing:1px; display:block; } .cl-store-usercard .bal { font-family:'Poppins'; font-weight:800; color: var(--cl-navy); font-size:1.5rem; } /* ========================================================================== CREDIT PAGE ========================================================================== */ .cl-credit-wrap { padding: 56px 0 80px; } .cl-credit-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items:start; } .cl-credit-card { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); overflow:hidden; } .cl-credit-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding: 30px; border-bottom:1px solid var(--cl-border); background: linear-gradient(120deg,#fff,#f7faff); } .cl-credit-head h2 { font-family:'Poppins'; font-weight:900; color: var(--cl-navy); font-size:1.7rem; text-transform:uppercase; } .cl-credit-head h2 .hl { color: var(--cl-blue); } .cl-credit-head p { color: var(--cl-muted); margin-top: 8px; max-width: 420px; } .cl-credit-head .wallet { width:62px;height:62px;border-radius:18px;background: var(--cl-blue);color:#fff;display:grid;place-items:center;font-size:1.6rem;flex:none;box-shadow: var(--cl-shadow); } .cl-credit-body { padding: 30px; } .cl-field-label { display:block; font-weight:700; color: var(--cl-navy); letter-spacing:.5px; font-size:.85rem; margin-bottom:10px; text-transform:uppercase; } .cl-input-wrap { position:relative; } .cl-input-wrap i { position:absolute; left:18px; top:50%; transform:translateY(-50%); color: var(--cl-blue); } .cl-input { width:100%; padding: 17px 18px 17px 50px; border-radius: 14px; border:1.5px solid var(--cl-border); background: var(--cl-bg); font-size:1.05rem; color: var(--cl-navy); font-family:'Inter'; transition: border-color .25s, box-shadow .25s, background .25s; } .cl-input:focus { outline:none; border-color: var(--cl-blue); background:#fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-hint { color: var(--cl-muted); font-size:.82rem; margin-top:8px; } .cl-quick-amounts { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .cl-quick-amount { padding:9px 16px; border-radius:999px; border:1.5px solid var(--cl-border); background:#fff; color: var(--cl-ink); font-weight:700; cursor:pointer; transition:all .2s; } .cl-quick-amount:hover, .cl-quick-amount.sel { border-color: var(--cl-blue); color: var(--cl-blue); background: var(--cl-bg-soft); } .cl-select-wrap { position:relative; } .cl-select-wrap > i.lead { position:absolute; left:18px; top:50%; transform:translateY(-50%); color: var(--cl-blue); pointer-events:none; } .cl-select-wrap > i.chev { position:absolute; right:18px; top:50%; transform:translateY(-50%); color: var(--cl-muted); pointer-events:none; } .cl-select { width:100%; padding:17px 46px 17px 50px; border-radius:14px; border:1.5px solid var(--cl-border); background: var(--cl-bg); font-size:1rem; color: var(--cl-navy); appearance:none; cursor:pointer; font-family:'Inter'; } .cl-select:focus { outline:none; border-color: var(--cl-blue); } .cl-stripe-note { display:flex; gap:12px; align-items:center; background: var(--cl-bg-soft); border:1px solid var(--cl-border); border-radius:14px; padding:16px 18px; margin-top:20px; } .cl-stripe-note .logo { font-family:'Poppins'; font-weight:800; color:#635bff; font-size:1.1rem; } .cl-stripe-note p { color: var(--cl-muted); font-size:.86rem; } .cl-credit-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; flex-wrap:wrap; } .cl-secure { display:flex; align-items:center; gap:8px; color: var(--cl-green); font-weight:600; font-size:.92rem; } .cl-history { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 24px; } .cl-history-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; } .cl-history-head h3 { font-family:'Poppins'; color: var(--cl-navy); display:flex; align-items:center; gap:10px; } .cl-history-head h3 i { color: var(--cl-blue); } .cl-history-head a { color: var(--cl-blue); font-size:.85rem; font-weight:700; text-decoration:none; } .cl-history-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--cl-border); } .cl-history-item:last-child { border-bottom:none; } .cl-history-item .ico { width:42px;height:42px;border-radius:12px;background:#e7f6ee;color:var(--cl-green);display:grid;place-items:center;flex:none; } .cl-history-item .ico.minus { background:#fdecec; color: var(--cl-red); } .cl-history-item .label { font-weight:700; color: var(--cl-navy); font-size:.95rem; } .cl-history-item .status { font-size:.74rem; color: var(--cl-muted); letter-spacing:.5px; } .cl-history-item .amt { margin-left:auto; text-align:right; } .cl-history-item .amt .v { font-family:'Poppins'; font-weight:800; color: var(--cl-green); } .cl-history-item .amt .v.minus { color: var(--cl-red); } /* ========================================================================== PROFILE PAGE ========================================================================== */ .cl-profile-wrap { padding: 34px 0 80px; } .cl-profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } /* sidebar */ .cl-profile-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; } .cl-profile-usercard { background: linear-gradient(135deg, #2f6bff, #2563eb); border-radius: var(--cl-radius); padding: 26px 22px; text-align: center; color: #fff; box-shadow: var(--cl-shadow); position: relative; overflow: hidden; } .cl-profile-usercard::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 0%, rgba(255,255,255,.18), transparent 55%); } .cl-profile-usercard > * { position: relative; z-index: 2; } .cl-profile-usercard .av { width: 86px; height: 86px; border-radius: 22px; margin: 0 auto 14px; border: 3px solid rgba(255,255,255,.35); box-shadow: 0 12px 26px -10px rgba(0,0,0,.35); } .cl-profile-usercard h3 { font-family:'Poppins'; font-weight:800; font-size: 1.25rem; } .cl-profile-usercard .role { display:inline-flex; align-items:center; gap:6px; margin-top:10px; background: rgba(255,255,255,.2); padding: 5px 14px; border-radius: 999px; font-size:.78rem; font-weight:700; } .cl-profile-nav { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 14px; } .cl-profile-nav .grp-title { font-size:.7rem; letter-spacing:1.5px; color: var(--cl-muted); font-weight:700; padding: 12px 14px 6px; display:flex; align-items:center; gap:8px; } .cl-pnav-link { display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 12px; color: var(--cl-text); text-decoration:none; font-weight:600; font-size:.95rem; transition: all .2s; } .cl-pnav-link i { width:18px; color: var(--cl-muted); transition: color .2s; } .cl-pnav-link:hover { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-pnav-link:hover i { color: var(--cl-blue); } .cl-pnav-link.active { background: var(--cl-blue); color:#fff; box-shadow: var(--cl-shadow); } .cl-pnav-link.active i { color:#fff; } .cl-pnav-link.admin { color: var(--cl-blue); } .cl-pnav-divider { height:1px; background: var(--cl-border); margin: 8px 6px; } /* main */ .cl-profile-main { display: flex; flex-direction: column; gap: 22px; } .cl-profile-header { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background: linear-gradient(120deg,#fff,#f7faff); border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 24px 28px; } .cl-profile-header .left { display:flex; align-items:center; gap:18px; } .cl-profile-header .left img { width:68px; height:68px; border-radius:18px; box-shadow: var(--cl-shadow-soft); } .cl-profile-header h2 { font-family:'Poppins'; color: var(--cl-navy); font-size:1.5rem; } .cl-profile-header p { color: var(--cl-muted); font-size:.92rem; margin-top:2px; } .cl-online-dot { display:inline-block; width:8px;height:8px;border-radius:50%; margin-right:5px; } .cl-online-dot.on { background: var(--cl-green); box-shadow:0 0 8px var(--cl-green); } .cl-online-dot.off { background: #cbd5e1; } .cl-info-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cl-info-card { background:#fff; border:1px solid var(--cl-border); border-radius:16px; padding: 18px 20px; box-shadow: var(--cl-shadow-soft); display:flex; align-items:center; gap:14px; transition: transform .25s, box-shadow .25s; } .cl-info-card:hover { transform: translateY(-4px); box-shadow: var(--cl-shadow); } .cl-info-card .ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background: var(--cl-bg-soft); color: var(--cl-blue); font-size:1.15rem; flex:none; } .cl-info-card .lbl { font-size:.7rem; letter-spacing:1px; color: var(--cl-muted); font-weight:700; display:block; } .cl-info-card .val { font-family:'Poppins'; font-weight:700; color: var(--cl-navy); font-size:1.05rem; word-break: break-word; } .cl-panel { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); overflow:hidden; } .cl-panel-head { display:flex; align-items:center; justify-content:space-between; padding: 20px 24px; border-bottom:1px solid var(--cl-border); } .cl-panel-head h3 { font-family:'Poppins'; color: var(--cl-navy); font-size:1.15rem; display:flex; align-items:center; gap:10px; } .cl-panel-head h3 i { color: var(--cl-blue); } .cl-panel-head a { color: var(--cl-blue); font-weight:700; font-size:.85rem; text-decoration:none; } .cl-panel-head a:hover { text-decoration: underline; } .cl-panel-body { padding: 8px 8px 8px; } .cl-ptable { width:100%; border-collapse: collapse; } .cl-ptable th { text-align:left; color: var(--cl-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; font-weight:700; padding: 12px 16px; } .cl-ptable td { padding: 14px 16px; border-top:1px solid var(--cl-border); color: var(--cl-text); font-size:.92rem; } .cl-ptable tbody tr:hover { background: var(--cl-bg-soft); } .cl-ptable .id { color: var(--cl-muted); font-family: monospace; } .cl-ptable .link { color: var(--cl-navy); font-weight:700; text-decoration:none; } .cl-ptable .link:hover { color: var(--cl-blue); } .cl-ptable .plus { color: var(--cl-green); font-weight:700; } .cl-ptable .minus { color: var(--cl-red); font-weight:700; } .cl-tbadge { padding: 5px 12px; border-radius: 999px; font-size:.74rem; font-weight:700; } .cl-tbadge.open { background: rgba(37,99,235,.12); color: var(--cl-blue); } .cl-tbadge.success { background: rgba(22,163,74,.12); color: var(--cl-green); } .cl-tbadge.pending { background: rgba(245,179,0,.14); color: #b45309; } .cl-tbadge.failed { background: rgba(239,68,68,.12); color: var(--cl-red); } .cl-tbadge.closed { background: var(--cl-bg-soft); color: var(--cl-muted); } .cl-taction { width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;background:var(--cl-bg-soft);color:var(--cl-blue);text-decoration:none;transition:all .2s; } .cl-taction:hover { background: var(--cl-blue); color:#fff; } .cl-pempty { text-align:center; color: var(--cl-muted); padding: 36px 16px; } .cl-pempty i { display:block; font-size:2.2rem; color:#c5d2ec; margin-bottom:10px; } /* profil formlarÄ± (settings / security) */ .cl-form { display: flex; flex-direction: column; gap: 18px; } .cl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cl-form-group { display: flex; flex-direction: column; gap: 8px; } .cl-form-label { font-weight: 700; color: var(--cl-navy); font-size: .85rem; letter-spacing: .3px; } .cl-form-input-wrap { position: relative; } .cl-form-input-wrap > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cl-blue); font-size: .95rem; } .cl-form-input { width: 100%; padding: 14px 16px 14px 44px; border-radius: 13px; border: 1.5px solid var(--cl-border); background: var(--cl-bg); color: var(--cl-navy); font-size: .98rem; font-family: 'Inter', sans-serif; transition: border-color .2s, box-shadow .2s, background .2s; } .cl-form-input:focus { outline: none; border-color: var(--cl-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-form-input:disabled { background: var(--cl-bg-soft); color: var(--cl-muted); cursor: not-allowed; } .cl-form-hint { font-size: .8rem; color: var(--cl-muted); } .cl-form-actions { display: flex; justify-content: flex-end; margin-top: 4px; } /* uyarÄ± kutularÄ± */ .cl-alert { display:flex; align-items:center; gap:10px; padding: 14px 18px; border-radius: 13px; font-weight: 600; font-size: .92rem; } .cl-alert i { font-size: 1.1rem; } .cl-alert.success { background: rgba(22,163,74,.12); color: var(--cl-green); border: 1px solid rgba(22,163,74,.25); } .cl-alert.error { background: rgba(239,68,68,.10); color: var(--cl-red); border: 1px solid rgba(239,68,68,.25); } /* ========================================================================== PRODUCT DETAIL ========================================================================== */ .cl-pd-wrap { padding: 30px 0 80px; } .cl-pd-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: start; } /* sol â€” gÃ¶rsel */ .cl-pd-media { background: linear-gradient(160deg, #fff, #f3f7ff); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 40px; min-height: 380px; display: grid; place-items: center; position: sticky; top: 90px; overflow: hidden; } .cl-pd-media::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(37,99,235,.06) 1px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; } .cl-pd-media img { max-width: 75%; max-height: 320px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 24px 36px rgba(15,27,51,.2)); transition: transform .4s cubic-bezier(.2,.8,.2,1); } .cl-pd-media:hover img { transform: scale(1.06) rotate(-2deg); } .cl-pd-media .ph { font-size: 5rem; color: #c5d2ec; position: relative; z-index: 1; } /* saÄŸ â€” bilgi/satÄ±n al */ .cl-pd-info { background: #fff; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 32px; } .cl-pd-cat { display: inline-flex; align-items: center; gap: 7px; background: var(--cl-bg-soft); color: var(--cl-blue); font-weight: 700; font-size: .76rem; letter-spacing: .5px; padding: 6px 14px; border-radius: 999px; } .cl-pd-name { font-family:'Poppins'; font-weight: 800; color: var(--cl-navy); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 16px 0 14px; line-height: 1.15; } .cl-pd-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; } .cl-pd-price .v { font-family:'Poppins'; font-weight: 900; font-size: 2.6rem; color: var(--cl-blue); line-height: 1; } .cl-pd-price .u { color: var(--cl-muted); font-weight: 700; font-size: 1.05rem; } .cl-pd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin-bottom: 26px; } .cl-pd-meta-item { background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: 14px; padding: 14px 16px; } .cl-pd-meta-item .k { display: flex; align-items: center; gap: 7px; color: var(--cl-muted); font-size: .76rem; font-weight: 600; margin-bottom: 6px; } .cl-pd-meta-item .k i { color: var(--cl-blue); } .cl-pd-meta-item .val { font-family:'Poppins'; font-weight: 700; color: var(--cl-navy); } .cl-pd-meta-item .val.in-stock { color: var(--cl-green); } .cl-pd-meta-item .val.out-of-stock { color: var(--cl-red); } .cl-pd-buy { width: 100%; justify-content: center; font-size: 1.05rem; padding: 16px; border-radius: 14px; } .cl-pd-buy.disabled { background: var(--cl-bg-soft); color: var(--cl-muted); cursor: not-allowed; box-shadow: none; } .cl-pd-buy.disabled:hover { transform: none; } .cl-pd-balance { text-align: center; color: var(--cl-muted); margin-top: 12px; font-size: .9rem; } .cl-pd-balance strong { color: var(--cl-navy); } .cl-pd-secure { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--cl-muted); font-size: .82rem; margin-top: 14px; } .cl-pd-secure i { color: var(--cl-green); } /* aÃ§Ä±klama + bÃ¶lÃ¼m baÅŸlÄ±ÄŸÄ± */ .cl-pd-section-title { display: flex; align-items: center; gap: 12px; font-family:'Poppins'; font-weight: 800; color: var(--cl-navy); font-size: 1.4rem; margin: 44px 0 20px; } .cl-pd-section-title::before { content: ""; width: 5px; height: 26px; border-radius: 3px; background: var(--cl-blue); } .cl-pd-desc { background: #fff; border: 1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding: 28px 32px; color: var(--cl-text); line-height: 1.8; } /* ========================================================================== AUTH (login / register) â€” full-screen split ========================================================================== */ .cl-auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--cl-bg); overflow: hidden; } /* sol â€” marka/gÃ¶rsel taraf */ .cl-auth-brand { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 64px 70px; color: #fff; overflow: hidden; background: linear-gradient(150deg, rgba(37,99,235,.92), rgba(15,27,51,.92)), url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1400&q=60'); background-size: cover; background-position: center; } .cl-auth-brand::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size: 22px 22px; opacity: .5; } .cl-auth-blob { position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none; } .cl-auth-blob.b1 { width: 320px; height: 320px; top: -90px; right: -80px; background: radial-gradient(circle, rgba(96,165,250,.45), transparent 70%); animation: cl-float 9s ease-in-out infinite; } .cl-auth-blob.b2 { width: 260px; height: 260px; bottom: -70px; left: -60px; background: radial-gradient(circle, rgba(139,92,246,.4), transparent 70%); animation: cl-float 11s ease-in-out infinite reverse; } .cl-auth-brand-inner { position: relative; z-index: 2; max-width: 460px; } .cl-auth-logo { width: 92px; height: 92px; margin-bottom: 28px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.4)); animation: cl-float 6s ease-in-out infinite; } .cl-auth-logo img { width: 100%; height: 100%; object-fit: contain; } .cl-auth-brand h2 { font-family:'Poppins'; font-weight: 900; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -.5px; } .cl-auth-brand h2 .hl { color: #93c5fd; } .cl-auth-brand p { color: rgba(255,255,255,.85); line-height: 1.7; margin: 18px 0 30px; font-size: 1.05rem; } .cl-auth-feats { display: flex; flex-direction: column; gap: 14px; } .cl-auth-feat { display: flex; align-items: center; gap: 14px; font-weight: 500; } .cl-auth-feat .fi { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.1rem; flex: none; backdrop-filter: blur(4px); } .cl-auth-brand .ip-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); padding: 12px 22px; border-radius: 999px; font-family:'Poppins'; font-weight: 700; cursor: pointer; transition: background .2s, transform .2s; backdrop-filter: blur(4px); } .cl-auth-brand .ip-pill:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); } /* saÄŸ â€” form taraf */ .cl-auth-form-side { display: flex; align-items: center; justify-content: center; padding: 48px 28px; position: relative; } .cl-auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--cl-border); border-radius: 26px; box-shadow: var(--cl-shadow); padding: 40px 38px; animation: cl-auth-in .6s cubic-bezier(.2,.8,.2,1); } @keyframes cl-auth-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } } .cl-auth-back { position: absolute; top: 26px; left: 28px; color: var(--cl-muted); text-decoration: none; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; transition: color .2s; } .cl-auth-back:hover { color: var(--cl-blue); } .cl-auth-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--cl-bg-soft); color: var(--cl-blue); font-weight: 700; font-size: .76rem; letter-spacing: 1px; padding: 7px 14px; border-radius: 999px; } .cl-auth-card h1 { font-family:'Poppins'; font-weight: 800; color: var(--cl-navy); font-size: 1.85rem; margin: 16px 0 6px; } .cl-auth-card .sub { color: var(--cl-muted); margin-bottom: 26px; font-size: .95rem; } /* floating-label input */ .cl-fl { position: relative; margin-bottom: 18px; } .cl-fl > i.lead { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cl-muted); transition: color .2s; font-size: .95rem; } .cl-fl input { width: 100%; padding: 17px 46px 17px 44px; border-radius: 14px; border: 1.5px solid var(--cl-border); background: var(--cl-bg); color: var(--cl-navy); font-size: 1rem; font-family:'Inter',sans-serif; transition: border-color .2s, box-shadow .2s, background .2s; } .cl-fl input::placeholder { color: transparent; } .cl-fl label { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); color: var(--cl-muted); pointer-events: none; transition: all .18s ease; background: transparent; padding: 0 4px; } .cl-fl input:focus { outline: none; border-color: var(--cl-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-fl input:focus + label, .cl-fl input:not(:placeholder-shown) + label { top: 0; left: 38px; font-size: .74rem; color: var(--cl-blue); font-weight: 600; background: #fff; } .cl-fl input:focus ~ i.lead { color: var(--cl-blue); } .cl-fl .toggle-pw { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--cl-muted); cursor: pointer; background: none; border: none; padding: 4px; font-size: .95rem; } .cl-fl .toggle-pw:hover { color: var(--cl-blue); } .cl-auth-submit { width: 100%; justify-content: center; margin-top: 6px; } .cl-auth-msg { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 12px; text-align: center; font-weight: 600; font-size: .9rem; } .cl-auth-msg.show { display: block; animation: cl-auth-in .3s ease; } .cl-auth-msg.ok { background: rgba(22,163,74,.12); color: var(--cl-green); border: 1px solid rgba(22,163,74,.25); } .cl-auth-msg.err { background: rgba(239,68,68,.10); color: var(--cl-red); border: 1px solid rgba(239,68,68,.25); } .cl-auth-foot { text-align: center; margin-top: 22px; color: var(--cl-muted); font-size: .92rem; } .cl-auth-foot a { color: var(--cl-blue); font-weight: 700; text-decoration: none; } .cl-auth-foot a:hover { text-decoration: underline; } .cl-auth-strength { height: 5px; border-radius: 3px; background: var(--cl-border); overflow: hidden; margin: -8px 0 16px; } .cl-auth-strength > i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .3s, background .3s; } /* ========================================================================== SUPPORT / TICKETS ========================================================================== */ .cl-support-wrap { padding: 30px 0 80px; } /* sayfa baÅŸlÄ±ÄŸÄ± + aksiyon */ .cl-sup-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin: 4px 0 24px; } .cl-sup-head h1 { font-family:'Poppins'; font-weight:900; color: var(--cl-navy); font-size: clamp(1.7rem,3.5vw,2.4rem); text-transform: uppercase; } .cl-sup-head .cl-eyebrow { margin-bottom: 4px; } /* durum + kategori rozetleri (tickets) */ .cl-sup-status { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-size:.74rem; font-weight:700; } .cl-sup-status .dot { width:7px; height:7px; border-radius:50%; } .cl-sup-status.open { background: rgba(37,99,235,.12); color: var(--cl-blue); } .cl-sup-status.open .dot { background: var(--cl-blue); } .cl-sup-status.answered { background: rgba(22,163,74,.12); color: var(--cl-green); } .cl-sup-status.answered .dot { background: var(--cl-green); } .cl-sup-status.closed { background: var(--cl-bg-soft); color: var(--cl-muted); } .cl-sup-status.closed .dot { background: var(--cl-muted); } .cl-sup-cat { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; background: var(--cl-bg-soft); color: var(--cl-muted); font-size:.74rem; font-weight:700; } .cl-sup-cat .dot { width:7px; height:7px; border-radius:50%; background: var(--cl-blue); } /* tickets tablo aksiyon butonlarÄ± */ .cl-sup-act { width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;text-decoration:none;transition:all .2s;border:1px solid var(--cl-border); } .cl-sup-act.view { background: var(--cl-bg-soft); color: var(--cl-blue); } .cl-sup-act.view:hover { background: var(--cl-blue); color:#fff; } .cl-sup-act.close { background: #fdecec; color: var(--cl-red); border-color: #f7caca; } .cl-sup-act.close:hover { background: var(--cl-red); color:#fff; } /* talep oluÅŸtur: form + bilgi kartÄ± */ .cl-sup-create { display:grid; grid-template-columns: 1.6fr 1fr; gap:24px; align-items:start; } .cl-sup-info { background: linear-gradient(135deg,#2f6bff,#2563eb); border-radius: var(--cl-radius); padding: 28px; color:#fff; box-shadow: var(--cl-shadow); position: sticky; top: 90px; } .cl-sup-info .ic { width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px; } .cl-sup-info h3 { font-family:'Poppins'; font-weight:800; font-size:1.2rem; } .cl-sup-info p { color: rgba(255,255,255,.85); line-height:1.6; margin:10px 0 18px; font-size:.92rem; } .cl-sup-info ul { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:10px; } .cl-sup-info li { display:flex; align-items:center; gap:10px; font-size:.9rem; } .cl-sup-info li i { width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:.7rem; } .cl-sup-info .ibtn { display:inline-flex; align-items:center; gap:8px; background:#fff; color: var(--cl-blue); padding:11px 18px; border-radius:12px; font-weight:700; text-decoration:none; font-size:.9rem; transition: transform .2s; } .cl-sup-info .ibtn:hover { transform: translateY(-2px); } .cl-textarea { width:100%; padding:14px 16px; border-radius:13px; border:1.5px solid var(--cl-border); background: var(--cl-bg); color: var(--cl-navy); font-family:'Inter',sans-serif; font-size:.98rem; resize:vertical; transition: border-color .2s, box-shadow .2s, background .2s; } .cl-textarea:focus { outline:none; border-color: var(--cl-blue); background:#fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-select-plain { width:100%; padding:14px 16px; border-radius:13px; border:1.5px solid var(--cl-border); background: var(--cl-bg); color: var(--cl-navy); font-family:'Inter',sans-serif; font-size:.98rem; cursor:pointer; } .cl-select-plain:focus { outline:none; border-color: var(--cl-blue); } /* ========================================================================== STAFF â€” Yetkili kadrosu (gruplandÄ±rÄ±lmÄ±ÅŸ, premium) ========================================================================== */ .cl-staff-page { background: radial-gradient(rgba(37,99,235,.10) 1.4px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%); min-height: 70vh; } .cl-staff-hero { text-align: center; padding: 90px 0 30px; position: relative; } .cl-staff-hero-ico { width: 96px; height: 96px; margin: 0 auto 24px; display: grid; place-items: center; background: linear-gradient(135deg, #dbeafe, #eff6ff); border: 1px solid rgba(37,99,235,.15); border-radius: 26px; box-shadow: 0 22px 50px -22px rgba(37,99,235,.4); position: relative; overflow: hidden; } .cl-staff-hero-ico::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(37,99,235,.20), transparent 60%); } .cl-staff-hero-ico i { font-size: 2.4rem; color: var(--cl-blue); position: relative; z-index: 2; filter: drop-shadow(0 6px 12px rgba(37,99,235,.35)); } .cl-staff-hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; color: var(--cl-navy); letter-spacing: -1px; text-transform: uppercase; margin: 0; } .cl-staff-hero-title .hl { color: var(--cl-blue); } .cl-staff-body { padding: 30px 0 90px; } /* Grup */ .cl-staff-group { margin-bottom: 60px; } .cl-staff-group:last-child { margin-bottom: 0; } .cl-staff-group-head { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; } .cl-staff-group-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(15,27,51,.12), transparent); } .cl-staff-group-pill { background: #fff; color: var(--cl-navy); font-weight: 800; font-size: .82rem; letter-spacing: 1.2px; padding: 10px 26px; border-radius: 999px; border: 1px solid var(--cl-border); box-shadow: 0 10px 26px -14px rgba(15,27,51,.2); white-space: nowrap; position: relative; } .cl-staff-group-pill::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--cl-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.15); } .cl-staff-group-pill::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--cl-blue); box-shadow: 0 0 0 4px rgba(37,99,235,.15); } /* Grid */ .cl-staff-grid2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .cl-staff-grid2 > .cl-staff-card2 { flex: 0 1 240px; max-width: 280px; } /* Kart */ .cl-staff-card2 { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--cl-border); box-shadow: 0 12px 30px -18px rgba(15,27,51,.16); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative; } .cl-staff-card2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--clr, var(--cl-blue)), transparent); opacity: 0; transition: opacity .3s; } .cl-staff-card2:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -18px rgba(37,99,235,.28); border-color: color-mix(in srgb, var(--clr, var(--cl-blue)) 35%, var(--cl-border)); } .cl-staff-card2:hover::before { opacity: 1; } .cl-staff-card2-top { position: relative; height: 140px; background: linear-gradient(180deg, color-mix(in srgb, var(--clr, var(--cl-blue)) 8%, #fff), #fff), #fff; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(15,27,51,.04); } .cl-staff-card2-glow { position: absolute; width: 220px; height: 220px; background: radial-gradient(circle, color-mix(in srgb, var(--clr, var(--cl-blue)) 35%, transparent) 0%, transparent 65%); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -30%); opacity: .55; transition: opacity .3s, transform .4s; } .cl-staff-card2:hover .cl-staff-card2-glow { opacity: .8; transform: translate(-50%, -36%) scale(1.08); } .cl-staff-card2-dot { position: absolute; inset: 0; background-image: radial-gradient(rgba(15,27,51,.08) 1px, transparent 1.3px); background-size: 14px 14px; pointer-events: none; opacity: .65; } .cl-staff-card2-top img { position: relative; z-index: 2; width: 86px; height: 86px; border-radius: 16px; object-fit: cover; image-rendering: pixelated; background: #fff; padding: 6px; box-shadow: 0 14px 30px -12px rgba(15,27,51,.35); transition: transform .35s ease; } .cl-staff-card2:hover .cl-staff-card2-top img { transform: translateY(-3px) scale(1.05); } .cl-staff-card2-body { padding: 16px 16px 20px; text-align: center; } .cl-staff-card2-name { font-size: 1.05rem; font-weight: 800; color: var(--cl-navy); margin: 0 0 4px; letter-spacing: -0.2px; } .cl-staff-card2-role { font-size: .72rem; font-weight: 700; color: var(--cl-muted); letter-spacing: 1px; } @media (max-width: 720px) { .cl-staff-grid2 { gap: 14px; } .cl-staff-grid2 > .cl-staff-card2 { flex: 0 1 calc(50% - 7px); max-width: none; } .cl-staff-card2-top { height: 120px; } .cl-staff-card2-top img { width: 70px; height: 70px; } } .cl-empty { text-align: center; padding: 60px 20px; background: #fff; border-radius: 22px; border: 1px dashed var(--cl-border); margin-top: 40px; } .cl-empty i { font-size: 3rem; color: var(--cl-blue); margin-bottom: 18px; display: block; } .cl-empty h3 { font-size: 1.3rem; color: var(--cl-navy); margin: 0 0 8px; } .cl-empty p { color: var(--cl-muted); margin: 0; } .cl-center { text-align: center; } /* Auth â€” Discord ile giriÅŸ */ .cl-auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--cl-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; } .cl-auth-divider::before, .cl-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--cl-border); } .cl-btn-discord-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 18px; border-radius: 13px; background: #5865f2; color: #fff; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: .98rem; transition: transform .2s, box-shadow .2s, background .2s; box-shadow: 0 12px 30px -10px rgba(88,101,242,.6); } .cl-btn-discord-oauth:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(88,101,242,.7); } .cl-btn-discord-oauth i { font-size: 1.15rem; } .cl-auth-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; padding: 11px 14px; border-radius: 11px; font-size: .88rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* ========================================================================== HERO 3 â€” LeaderOS tarzÄ± koyu hero (sol metin + saÄŸ gÃ¶rsel + alt IP barÄ±) ========================================================================== */ body.cl-dark-top { background: #0a0f1a; } body.cl-dark-top .cl-announce { background: linear-gradient(90deg, #1e40af, #3b82f6); border-bottom: 1px solid rgba(255,255,255,.06); } /* Koyu navbar override â€” sadece body.cl-dark-top altÄ±nda */ body.cl-dark-top .navbar { background: #0a0f1a !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; box-shadow: none !important; } body.cl-dark-top .navbar .nav-menu-link, body.cl-dark-top .navbar .nav-username, body.cl-dark-top .navbar .logo span, body.cl-dark-top .navbar .logo { color: #e5e7eb !important; } body.cl-dark-top .navbar .nav-menu-link { position: relative; padding: 10px 4px; transition: color .2s; } body.cl-dark-top .navbar .nav-menu-link:hover, body.cl-dark-top .navbar .nav-menu-link.active { color: #fff !important; } body.cl-dark-top .navbar .nav-menu-link.active::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 3px; background: #3b82f6; } body.cl-dark-top .navbar .btn-icon { color: #e5e7eb !important; background: transparent !important; } body.cl-dark-top .navbar .btn-login { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #3b82f6, #60a5fa) !important; color: #fff !important; padding: 10px 22px !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 10px 30px -10px rgba(59,130,246,.6) !important; border: none !important; transition: transform .2s, box-shadow .2s !important; } body.cl-dark-top .navbar .btn-login::after { content: "â€º"; font-size: 1.2rem; line-height: 1; transform: translateY(-1px); } body.cl-dark-top .navbar .btn-login:hover { transform: translateY(-2px); } body.cl-dark-top .navbar .btn-register { color: #e5e7eb !important; background: transparent !important; border: 1px solid rgba(255,255,255,.18) !important; padding: 10px 18px !important; border-radius: 999px !important; } body.cl-dark-top .navbar .nav-profile-trigger { color: #e5e7eb !important; } .cl-hero3 { position: relative; min-height: 640px; background: #0a0f1a; overflow: hidden; color: #fff; padding: 0; } .cl-hero3-bg { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1587573089734-09cb69c0f2b4?auto=format&fit=crop&w=1920&q=70'); background-size: cover; background-position: center; z-index: 0; } .cl-hero3-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,15,26,.95) 0%, rgba(10,15,26,.7) 35%, rgba(10,15,26,.25) 65%, rgba(10,15,26,.55) 100%); } .cl-hero3-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(320px, 1fr) 1fr; gap: 60px; align-items: center; min-height: 640px; padding: 80px 0 140px; } .cl-hero3-text { max-width: 540px; } .cl-hero3-text h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 800; line-height: 1.15; margin: 0 0 22px; color: #fff; letter-spacing: -0.5px; } .cl-hero3-text p { font-size: 1.05rem; line-height: 1.7; color: #cbd5e1; margin: 0 0 36px; max-width: 460px; } .cl-hero3-actions { display: flex; gap: 14px; flex-wrap: wrap; } .cl-hero3-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .25s, box-shadow .25s, background .25s; border: none; cursor: pointer; } .cl-hero3-btn--primary { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; box-shadow: 0 16px 40px -12px rgba(59,130,246,.6); } .cl-hero3-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -10px rgba(59,130,246,.7); } .cl-hero3-btn--dark { background: #0f172a; color: #fff; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); } .cl-hero3-btn--dark:hover { transform: translateY(-3px); background: #1e293b; } /* Alt sticker IP bar */ .cl-hero3-ipbar { position: relative; z-index: 3; margin-top: -90px; background: #0f172a; border-radius: 22px; padding: 26px 36px; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.06); } .cl-hero3-ipbar::before { content: ""; position: absolute; top: -20px; left: 30px; right: 30px; height: 30px; background: #0f172a; border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; } .cl-hero3-ipbar-left h3 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; color: #fff; } .cl-hero3-ipbar-left p { margin: 0; font-size: .92rem; color: #94a3b8; max-width: 540px; line-height: 1.55; } .cl-hero3-ipbar-right { text-align: right; } .cl-hero3-ip { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; font-weight: 700; padding: 14px 26px; border-radius: 999px; cursor: pointer; border: none; font-size: 1rem; box-shadow: 0 14px 36px -10px rgba(59,130,246,.6); transition: transform .2s, box-shadow .2s; position: relative; } .cl-hero3-ip:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -8px rgba(59,130,246,.7); } .cl-hero3-ip .copied-flag { position: absolute; left: 50%; top: -36px; transform: translateX(-50%); background: var(--cl-green); color: #fff; padding: 5px 12px; border-radius: 6px; font-size: .75rem; opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; } .cl-hero3-ip.copied .copied-flag { opacity: 1; transform: translateX(-50%) translateY(-4px); } .cl-hero3-ipbar-count { margin-top: 8px; font-size: .85rem; color: #94a3b8; } .cl-hero3-ipbar-count strong { color: #fff; font-weight: 700; } /* Responsive */ @media (max-width: 900px) { .cl-hero3-inner { grid-template-columns: 1fr; padding: 60px 0 140px; text-align: center; } .cl-hero3-text { margin: 0 auto; } .cl-hero3-text p { margin-left: auto; margin-right: auto; } .cl-hero3-actions { justify-content: center; } .cl-hero3-bg::before { background: linear-gradient(180deg, rgba(10,15,26,.85) 0%, rgba(10,15,26,.7) 60%, rgba(10,15,26,.9) 100%); } .cl-hero3-ipbar { flex-direction: column; align-items: stretch; text-align: center; } .cl-hero3-ipbar-right { text-align: center; } } /* talep detay: mesaj akÄ±ÅŸÄ± */ .cl-sup-detail { display:grid; grid-template-columns: 1fr 300px; gap:24px; align-items:start; } .cl-sup-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding:16px 20px; margin-bottom:18px; } .cl-sup-bar .meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cl-sup-bar .date { color: var(--cl-muted); font-size:.85rem; } .cl-msg-list { display:flex; flex-direction:column; gap:16px; margin-bottom:20px; } .cl-msg { display:flex; gap:14px; } .cl-msg .av { width:42px;height:42px;border-radius:12px;flex:none;overflow:hidden; box-shadow: var(--cl-shadow-soft); } .cl-msg .av img { width:100%;height:100%;object-fit:cover; } .cl-msg .bubble { flex:1; background:#fff; border:1px solid var(--cl-border); border-radius:16px; border-top-left-radius:4px; padding:14px 18px; box-shadow: var(--cl-shadow-soft); } .cl-msg.admin .bubble { background: linear-gradient(135deg,#f0f5ff,#e8f0ff); border-color:#cdddfb; } .cl-msg .mhead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; } .cl-msg .author { font-family:'Poppins'; font-weight:700; color: var(--cl-navy); font-size:.95rem; display:flex; align-items:center; gap:8px; } .cl-msg .abadge { background: var(--cl-blue); color:#fff; font-size:.62rem; font-weight:700; padding:2px 8px; border-radius:6px; letter-spacing:.5px; } .cl-msg .mtime { color: var(--cl-muted); font-size:.78rem; } .cl-msg .mbody { color: var(--cl-text); line-height:1.6; font-size:.94rem; } .cl-reply-card { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding:22px; } .cl-reply-card h4 { font-family:'Poppins'; color: var(--cl-navy); margin-bottom:12px; display:flex; align-items:center; gap:8px; } .cl-reply-card h4 i { color: var(--cl-blue); } .cl-closed-notice { display:flex; align-items:center; gap:10px; background: var(--cl-bg-soft); border:1px dashed var(--cl-border); border-radius: var(--cl-radius); padding:18px 20px; color: var(--cl-muted); font-weight:500; } .cl-closed-notice i { color: var(--cl-muted); } .cl-sup-info-card { background:#fff; border:1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-soft); padding:22px; position: sticky; top:90px; } .cl-sup-info-card h4 { font-family:'Poppins'; color: var(--cl-navy); margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--cl-border); } .cl-sup-info-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; font-size:.9rem; } .cl-sup-info-row .k { color: var(--cl-muted); } .cl-sup-info-row .v { color: var(--cl-navy); font-weight:600; } .cl-btn-danger { background: var(--cl-red); color:#fff; } .cl-btn-danger:hover { background:#dc2626; transform: translateY(-2px); } .cl-btn-success { background: var(--cl-green); color:#fff; } .cl-btn-success:hover { background:#15803d; transform: translateY(-2px); } .cl-btn-sm { padding:9px 16px; font-size:.85rem; border-radius:10px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 992px) { .cl-guide-card, .cl-discord, .cl-storecta, .cl-mgmt, .cl-credit-grid { grid-template-columns: 1fr; } .cl-guide-img, .cl-discord-img, .cl-mgmt-art { order:-1; } .cl-store-layout { grid-template-columns: 1fr; } .cl-store-sidebar { position: static; } .cl-product-grid { grid-template-columns: repeat(2, 1fr); } .cl-profile-layout { grid-template-columns: 1fr; } .cl-profile-side { position: static; } .cl-info-grid { grid-template-columns: repeat(2, 1fr); } .cl-form-row { grid-template-columns: 1fr; } .cl-sup-create { grid-template-columns: 1fr; } .cl-sup-info { position: static; order:-1; } .cl-sup-detail { grid-template-columns: 1fr; } .cl-sup-info-card { position: static; } .cl-auth { grid-template-columns: 1fr; } .cl-auth-brand { display: none; } .cl-pd-layout { grid-template-columns: 1fr; } .cl-pd-media { position: static; min-height: 280px; } .cl-theme .nav-menu { display:none; } .cl-theme .mobile-menu-toggle { display:block; } } @media (max-width: 640px) { .cl-stats-grid { grid-template-columns: 1fr; gap: 28px; } .cl-stat:not(:last-child)::after { display:none; } .cl-podium { grid-template-columns: 1fr; } .cl-product-grid { grid-template-columns: 1fr; } .cl-guide-card, .cl-storecta, .cl-mgmt { padding: 32px 22px; } .cl-hero-ip { padding: 16px 32px; } .cl-mgmt-art { justify-content:center; } .cl-info-grid { grid-template-columns: 1fr; } .cl-ptable { font-size: .82rem; } .cl-ptable th:nth-child(3), .cl-ptable td:nth-child(3) { display: none; } } /* ===== SANDIK (INVENTORY) ===== */ .cl-inv-hint { background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.18); color: var(--cl-navy); padding: 12px 16px; border-radius: 12px; font-size: .92rem; margin: 0 0 18px; line-height: 1.55; } .cl-inv-hint i { color: var(--cl-blue); margin-right: 6px; } .cl-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .cl-inv-card { background: #fff; border: 1px solid rgba(15,27,51,.08); border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .cl-inv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(15,27,51,.18); border-color: rgba(37,99,235,.25); } .cl-inv-media { position: relative; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 140px; } .cl-inv-media img { max-width: 96px; max-height: 96px; object-fit: contain; } .cl-inv-status { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .cl-inv-status.pending { color: #b45309; } .cl-inv-status.success { color: #047857; } .cl-inv-status.failed { color: #b91c1c; } .cl-inv-status i { font-size: .72rem; } .cl-inv-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .cl-inv-cat { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: var(--cl-blue); text-transform: uppercase; letter-spacing: .04em; } .cl-inv-name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--cl-navy); line-height: 1.3; } .cl-inv-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--cl-muted); } .cl-inv-meta i { color: var(--cl-blue); margin-right: 4px; } .cl-inv-actions { margin-top: auto; display: flex; gap: 8px; padding-top: 8px; } .cl-inv-actions .cl-btn { flex: 1; justify-content: center; } .cl-inv-actions .cl-btn-ghost { background: rgba(239,68,68,.08); color: #b91c1c; border: 1px solid rgba(239,68,68,.25); } .cl-inv-actions .cl-btn-ghost:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); } .cl-inv-done { margin-top: auto; padding: 9px 12px; border-radius: 10px; background: rgba(4,120,87,.08); color: #047857; font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; } .cl-inv-done.cancelled { background: rgba(185,28,28,.08); color: #b91c1c; } @media (max-width: 640px) { .cl-inv-grid { grid-template-columns: 1fr; } .cl-inv-actions { flex-direction: column; } } .cl-inv-source { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); color: #fff; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px rgba(37,99,235,.25); } /* ===== HEDÄ°YE (GIFTS) ===== */ .cl-gift-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; } .cl-gift-redeem { text-align: center; padding: 40px 32px 36px !important; } .cl-gift-illust { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 18px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); box-shadow: 0 12px 24px -10px rgba(37,99,235,.3); } .cl-gift-illust i { font-size: 2rem; color: var(--cl-blue); transform: rotate(6deg); } .cl-gift-title { font-size: 1.4rem; font-weight: 800; color: var(--cl-navy); margin: 0 0 8px; } .cl-gift-sub { color: var(--cl-blue); font-size: .92rem; margin: 0 0 26px; } .cl-gift-form { max-width: 420px; margin: 0 auto; text-align: left; } .cl-gift-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--cl-muted); margin-bottom: 8px; } .cl-gift-input-wrap { position: relative; margin-bottom: 16px; } .cl-gift-input-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cl-muted); font-size: .95rem; } .cl-gift-input { width: 100%; padding: 14px 16px 14px 44px; border-radius: 12px; border: 1px solid rgba(15,27,51,.12); background: #f8fafc; font-size: 1rem; font-weight: 600; color: var(--cl-navy); letter-spacing: .04em; text-transform: uppercase; transition: border-color .15s, background .15s, box-shadow .15s; } .cl-gift-input::placeholder { color: #94a3b8; font-weight: 500; letter-spacing: .04em; } .cl-gift-input:focus { outline: none; border-color: var(--cl-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-gift-btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: .95rem; font-weight: 700; } .cl-gift-allcount { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--cl-muted); } .cl-gift-history { min-height: 280px; } .cl-gift-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--cl-muted); text-align: center; padding: 50px 18px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; } .cl-gift-empty i { font-size: 2rem; color: #cbd5e1; } .cl-gift-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .cl-gift-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: #f8fafc; border: 1px solid rgba(15,27,51,.06); border-radius: 12px; transition: border-color .15s, background .15s; } .cl-gift-row:hover { background: #fff; border-color: rgba(37,99,235,.25); } .cl-gift-row .ico { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; color: var(--cl-blue); overflow: hidden; } .cl-gift-row .ico img { max-width: 32px; max-height: 32px; } .cl-gift-row .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cl-gift-row .info strong { color: var(--cl-navy); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-gift-row .info .code { font-size: .72rem; color: var(--cl-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; } .cl-gift-row .date { font-size: .78rem; color: var(--cl-muted); font-weight: 600; } @media (max-width: 900px) { .cl-gift-layout { grid-template-columns: 1fr; } } /* ===== BAÅVURULAR (APPLICATIONS) ===== */ .cl-mgmt-actions { display: flex; flex-wrap: wrap; gap: 10px; } .cl-staff-apply-cta { margin-top: 22px; text-align: center; } /* BaÅŸvuru listesi (apply.php) */ .cl-apply-list { display: flex; flex-direction: column; gap: 12px; } .cl-apply-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; background: #fff; border: 1px solid rgba(15,27,51,.08); border-radius: 16px; text-decoration: none; color: var(--cl-navy); transition: transform .2s, box-shadow .2s, border-color .2s; } .cl-apply-row:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.3); box-shadow: 0 16px 30px -18px rgba(37,99,235,.35); } .cl-apply-row .ico { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; color: var(--cl-blue); font-size: 1.3rem; } .cl-apply-row .info h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--cl-navy); } .cl-apply-row .info p { margin: 0 0 6px; color: var(--cl-muted); font-size: .9rem; line-height: 1.5; } .cl-apply-row .info .role-tag { display: inline-flex; align-items: center; gap: 5px; background: rgba(37,99,235,.1); color: var(--cl-blue); font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .cl-apply-row .go { color: var(--cl-blue); font-size: 1.1rem; } /* BaÅŸvuru formu kartÄ± */ .cl-apply-card { background: #fff; border: 1px solid rgba(15,27,51,.08); border-radius: 20px; padding: 32px 32px 30px; } .cl-apply-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .cl-apply-head h2 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--cl-navy); } .cl-apply-head .role-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(37,99,235,.1); color: var(--cl-blue); font-size: .82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; } .cl-apply-desc { color: var(--cl-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 24px; } .cl-apply-form { display: flex; flex-direction: column; gap: 18px; } .cl-apply-field label { display: block; font-size: .9rem; font-weight: 700; color: var(--cl-navy); margin-bottom: 8px; } .cl-apply-field textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(15,27,51,.12); background: #f8fafc; font: inherit; color: var(--cl-navy); resize: vertical; transition: border-color .15s, background .15s, box-shadow .15s; } .cl-apply-field textarea:focus { outline: none; border-color: var(--cl-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-apply-form .cl-btn { align-self: flex-start; } /* Profil > BaÅŸvurularÄ±m */ .cl-app-list { display: flex; flex-direction: column; gap: 12px; } .cl-app-row { padding: 16px 18px; background: #f8fafc; border: 1px solid rgba(15,27,51,.06); border-radius: 14px; } .cl-app-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; } .cl-app-title strong { color: var(--cl-navy); font-size: 1rem; } .cl-app-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--cl-muted); font-size: .82rem; } .cl-app-meta i { color: var(--cl-blue); margin-right: 4px; } .cl-app-note { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid rgba(15,27,51,.06); border-radius: 10px; font-size: .88rem; line-height: 1.55; color: #334155; } .cl-app-note strong { color: var(--cl-navy); display: block; margin-bottom: 4px; } .cl-app-note i { color: var(--cl-blue); margin-right: 4px; } .cl-app-success-msg { margin-top: 10px; padding: 10px 12px; background: rgba(4,120,87,.08); color: #047857; border-radius: 10px; font-size: .9rem; font-weight: 600; } .cl-app-success-msg i { margin-right: 6px; } @media (max-width: 640px) { .cl-apply-row { grid-template-columns: 44px 1fr auto; padding: 14px 16px; } .cl-apply-card { padding: 22px 18px 24px; } } /* (Eski sepet badge tanÄ±mÄ± kaldÄ±rÄ±ldÄ± â€” yukarÄ±daki mavi gradient tanÄ±m kullanÄ±lÄ±yor) */ .cl-theme .cl-nav-cart { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border-radius: 10px; color: var(--cl-ink, #16223d); font-size: 1.05rem; text-decoration: none; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; } .cl-theme .cl-nav-cart:hover { background: rgba(37, 99, 235, .08); color: var(--cl-blue); } .cl-theme .cl-nav-cart > i { display: inline-block !important; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900; font-size: 1.05rem; line-height: 1; } /* ===== ÃœRÃœN DETAY AKSÄ°YON BUTONLARI ===== */ .cl-pd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .cl-pd-action-form { flex: 1 1 160px; min-width: 0; } .cl-pd-actions .cl-pd-buy { margin: 0; width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; } .cl-pd-cart { background: #fff; color: var(--cl-blue); border: 2px solid var(--cl-blue); font-weight: 700; transition: background .15s, color .15s, transform .15s, box-shadow .15s; } .cl-pd-cart:hover { background: rgba(37,99,235,.08); color: var(--cl-blue-dark); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(37,99,235,.5); } .cl-pd-cart i { color: inherit; } /* ===== SEPET ===== */ .cl-cart-wrap { padding-bottom: 50px; } .cl-cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; margin-top: 20px; } .cl-cart-card, .cl-cart-summary, .cl-cart-coupon, .cl-cart-mycoupons { background: #fff; border: 1px solid rgba(15,27,51,.08); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 10px 30px -22px rgba(15,27,51,.25); } .cl-cart-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .cl-cart-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--cl-navy); display: flex; align-items: center; gap: 8px; } .cl-cart-card-head h2 i { color: var(--cl-blue); } .cl-cart-count { font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(37,99,235,.1); color: var(--cl-blue); } .cl-cart-link { font-size: .82rem; font-weight: 700; color: var(--cl-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .cl-cart-empty { text-align: center; padding: 40px 20px; color: var(--cl-muted); } .cl-cart-empty i { font-size: 3rem; color: #cbd5e1; margin-bottom: 14px; } .cl-cart-empty h3 { margin: 0 0 6px; color: var(--cl-navy); } .cl-cart-empty p { margin: 0 0 18px; } .cl-cart-items { display: flex; flex-direction: column; gap: 10px; } .cl-cart-item { display: grid; grid-template-columns: 80px 1fr auto auto auto; gap: 14px; align-items: center; padding: 12px; background: #f8fafc; border: 1px solid rgba(15,27,51,.06); border-radius: 14px; transition: border-color .15s, background .15s; } .cl-cart-item:hover { background: #fff; border-color: rgba(37,99,235,.25); } .cl-cart-item-media { width: 80px; height: 80px; border-radius: 12px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cl-cart-item-media img { max-width: 60px; max-height: 60px; } .cl-cart-item-body h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--cl-navy); } .cl-cart-item-body .cat { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; color: var(--cl-blue); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; } .cl-cart-item-price { display: flex; align-items: baseline; gap: 8px; } .cl-cart-item-price .now { font-weight: 700; color: var(--cl-navy); } .cl-cart-item-price del { color: var(--cl-muted); font-size: .82rem; } .cl-cart-qty { display: inline-flex; align-items: center; background: #fff; border: 1px solid rgba(15,27,51,.1); border-radius: 10px; overflow: hidden; } .cl-cart-qty .qty-btn { width: 30px; height: 32px; background: transparent; border: none; color: var(--cl-navy); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background .15s; } .cl-cart-qty .qty-btn:hover { background: rgba(37,99,235,.08); color: var(--cl-blue); } .cl-cart-qty .qty-val { min-width: 28px; text-align: center; font-weight: 700; color: var(--cl-navy); padding: 0 4px; } .cl-cart-item-total { font-weight: 800; color: var(--cl-navy); white-space: nowrap; min-width: 90px; text-align: right; } .cl-cart-remove .rm-btn { width: 32px; height: 32px; border-radius: 10px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.18); color: #b91c1c; cursor: pointer; transition: background .15s; } .cl-cart-remove .rm-btn:hover { background: rgba(239,68,68,.15); } /* Ã–ne Ã§Ä±kan */ .cl-cart-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .cl-cart-feat { position: relative; background: #f8fafc; border: 1px solid rgba(15,27,51,.06); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: transform .2s, border-color .2s; } .cl-cart-feat-badge { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 4px 10px -4px rgba(239,68,68,.5); z-index: 1; } .cl-cart-feat-badge i { margin-right: 3px; } .cl-cart-feat:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.25); } .cl-cart-feat-media { height: 80px; border-radius: 10px; background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); display: flex; align-items: center; justify-content: center; } .cl-cart-feat-media img { max-width: 56px; max-height: 56px; } .cl-cart-feat h4 { margin: 0; font-size: .88rem; font-weight: 700; color: var(--cl-navy); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cl-cart-feat-price { display: flex; align-items: baseline; gap: 6px; font-size: .85rem; } .cl-cart-feat-price .now { font-weight: 800; color: var(--cl-navy); } .cl-cart-feat-price del { color: var(--cl-muted); font-size: .75rem; } /* SAÄ â€” SipariÅŸ Ã–zeti */ .cl-cart-summary { background: linear-gradient(160deg, #ffffff 0%, #f0f5ff 100%); border-color: rgba(37,99,235,.18); position: sticky; top: 100px; } .cl-cart-summary-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .cl-cart-summary-rows .row { display: flex; justify-content: space-between; align-items: center; font-size: .92rem; color: var(--cl-muted); } .cl-cart-summary-rows .row strong { color: var(--cl-navy); font-weight: 700; } .cl-cart-summary-rows .row.discount { color: #047857; } .cl-cart-summary-rows .row.discount strong { color: #047857; } .cl-cart-summary-rows .row.discount i { margin-right: 4px; } .cl-cart-summary-rows .row.total { padding-top: 14px; border-top: 1px dashed rgba(15,27,51,.12); font-size: 1.05rem; } .cl-cart-summary-rows .row.total strong { color: var(--cl-navy); font-size: 1.3rem; font-weight: 900; } .cl-cart-balance { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2); border-radius: 12px; margin-bottom: 14px; font-size: .88rem; } .cl-cart-balance span { color: var(--cl-blue); font-weight: 700; } .cl-cart-balance strong { color: var(--cl-navy); font-weight: 800; } .cl-cart-checkout { width: 100%; justify-content: center; padding: 14px 18px !important; } .cl-cart-checkout:disabled { opacity: .5; cursor: not-allowed; } .cl-cart-secure { margin-top: 12px; text-align: center; font-size: .8rem; color: var(--cl-muted); } .cl-cart-secure i { color: #047857; margin-right: 5px; } /* Kupon kartÄ± */ .cl-coupon-form { display: flex; gap: 8px; } .cl-coupon-form input { flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(15,27,51,.12); background: #f8fafc; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cl-navy); transition: border-color .15s, background .15s, box-shadow .15s; } .cl-coupon-form input:focus { outline: none; border-color: var(--cl-blue); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); } .cl-coupon-applied { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(4,120,87,.08); border: 1px dashed rgba(4,120,87,.35); border-radius: 12px; } .cl-coupon-applied .label { display: block; font-size: .68rem; font-weight: 700; color: #047857; text-transform: uppercase; letter-spacing: .06em; } .cl-coupon-applied strong { display: block; color: var(--cl-navy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; letter-spacing: .04em; } .cl-coupon-applied .pct { display: inline-block; font-size: .8rem; font-weight: 700; color: #047857; margin-top: 2px; } .cl-coupon-applied .rm-coupon { width: 32px; height: 32px; border-radius: 10px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #b91c1c; cursor: pointer; } /* KazanÄ±lan kuponlar (saÄŸ panel) */ .cl-cart-mc-empty { text-align: center; padding: 28px 16px; color: var(--cl-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; } .cl-cart-mc-empty i { font-size: 1.6rem; color: #cbd5e1; } .cl-cart-mc-empty span { font-weight: 700; color: var(--cl-navy); } .cl-cart-mc-empty small { font-size: .78rem; max-width: 240px; line-height: 1.4; } .cl-mc-list { display: flex; flex-direction: column; gap: 8px; } .cl-mc-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); border: 1px dashed rgba(37,99,235,.3); border-radius: 12px; } .cl-mc-pct { background: var(--cl-blue); color: #fff; border-radius: 10px; padding: 8px 6px; font-weight: 900; font-size: .85rem; text-align: center; line-height: 1.1; } .cl-mc-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cl-mc-info strong { color: var(--cl-navy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-mc-info span { font-size: .72rem; color: var(--cl-muted); } .cl-mc-info span i { color: var(--cl-blue); margin-right: 3px; } .cl-mc-use { padding: 6px 12px; border-radius: 8px; background: var(--cl-blue); color: #fff; border: none; font-size: .75rem; font-weight: 700; cursor: pointer; transition: background .15s; } .cl-mc-use:hover { background: var(--cl-blue-dark); } /* Profil > KuponlarÄ±m sayfasÄ± */ .cl-coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .cl-coupon-card { display: grid; grid-template-columns: 90px 1fr; background: #fff; border: 1px solid rgba(15,27,51,.08); border-radius: 14px; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .cl-coupon-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(15,27,51,.2); border-color: rgba(37,99,235,.25); } .cl-coupon-card.used, .cl-coupon-card.expired { opacity: .65; } .cl-coupon-left { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; position: relative; } .cl-coupon-left::after { content: ''; position: absolute; top: 0; right: -8px; width: 16px; height: 100%; background: radial-gradient(circle at left, transparent 8px, #fff 8px); } .cl-coupon-card.used .cl-coupon-left, .cl-coupon-card.expired .cl-coupon-left { background: linear-gradient(135deg, #64748b 0%, #475569 100%); } .cl-coupon-left .pct { font-size: 1.8rem; font-weight: 900; line-height: 1; } .cl-coupon-left .lbl { font-size: .65rem; font-weight: 700; letter-spacing: .08em; margin-top: 4px; } .cl-coupon-body { padding: 14px 16px 14px 24px; display: flex; flex-direction: column; gap: 8px; } .cl-coupon-body .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cl-coupon-body h4 { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; color: var(--cl-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cl-coupon-body .reason { font-size: .82rem; color: var(--cl-muted); } .cl-coupon-body .reason i { color: #f59e0b; margin-right: 5px; } .cl-coupon-body .meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .75rem; color: var(--cl-muted); } .cl-coupon-body .meta i { color: var(--cl-blue); margin-right: 3px; } .cl-coupon-copy { align-self: flex-start; } @media (max-width: 1024px) { .cl-cart-layout { grid-template-columns: 1fr; } .cl-cart-summary { position: static; } } /* ===== AETHERIS KULÃœBÃœ PUANI ===== */ .cl-aetheris { background: #fff; border: 1px solid rgba(15,27,51,.08); border-radius: 18px; padding: 26px 28px 30px; margin: 20px 0 22px; box-shadow: 0 14px 36px -22px rgba(15,27,51,.18); } .cl-aetheris-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; } .cl-aetheris-title { display: flex; align-items: center; gap: 12px; } .cl-aetheris-title .star { width: 30px; height: 30px; color: #f59e0b; font-size: 1.4rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cl-aetheris-title h3 { margin: 0 0 2px; font-size: 1.1rem; font-weight: 800; color: var(--cl-navy); } .cl-aetheris-title p { margin: 0; color: var(--cl-muted); font-size: .88rem; } .cl-aetheris-title p strong { color: var(--cl-blue); font-weight: 800; } .cl-aetheris-count { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.15); border-radius: 12px; font-size: .92rem; color: var(--cl-muted); } .cl-aetheris-count i { color: var(--cl-blue); cursor: help; } .cl-aetheris-count strong { color: var(--cl-navy); font-weight: 800; } .cl-aetheris-track { position: relative; padding: 0 20px; margin-bottom: 18px; } .cl-aetheris-track::before { content: ''; position: absolute; left: 40px; right: 40px; top: 20px; height: 4px; background: #e5e7eb; border-radius: 999px; z-index: 0; } .cl-aetheris-bar { position: absolute; left: 40px; top: 20px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--cl-blue) 0%, var(--cl-blue-bright) 100%); width: calc((100% - 80px) * var(--pct, 0%) / 100%); transition: width .4s ease; z-index: 1; } .cl-aetheris-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); } .cl-aetheris-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .cl-aetheris-step .dot { width: 40px; height: 40px; border-radius: 999px; background: #fff; border: 3px solid #e5e7eb; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; transition: all .2s; } .cl-aetheris-step.reached .dot { background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-dark) 100%); border-color: var(--cl-blue); color: #fff; box-shadow: 0 8px 18px -8px rgba(37,99,235,.5); } .cl-aetheris-step .label { font-size: .82rem; font-weight: 700; color: var(--cl-blue); } .cl-aetheris-step .gift { color: #94a3b8; font-size: .95rem; margin-top: 2px; } .cl-aetheris-step.reached .gift { color: var(--cl-blue); } .cl-aetheris-step .reward { font-size: .75rem; font-weight: 700; color: var(--cl-muted); line-height: 1.3; } .cl-aetheris-step.reached .reward { color: var(--cl-navy); } .cl-aetheris-foot { text-align: center; font-size: .78rem; color: var(--cl-muted); padding-top: 16px; border-top: 1px dashed rgba(15,27,51,.08); } .cl-aetheris-foot i { color: var(--cl-blue); margin-right: 5px; } /* KazanÄ±lan kuponlar â€” form/karte gÃ¼ncellemeler */ .cl-mc-card { width: 100%; cursor: pointer; } .cl-mc-card.is-applied { border-style: solid; border-color: #047857; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); } .cl-mc-pct .num { font-size: 1rem; font-weight: 900; display: block; line-height: 1; } .cl-mc-pct .unit { font-size: .58rem; font-weight: 700; opacity: .85; letter-spacing: .04em; } .cl-mc-card.is-applied .cl-mc-use { background: #047857; } @media (max-width: 640px) { .cl-aetheris-head { flex-direction: column; align-items: flex-start; } .cl-aetheris-track { padding: 0 8px; } .cl-aetheris-track::before { left: 24px; right: 24px; } .cl-aetheris-bar { left: 24px; width: calc((100% - 48px) * var(--pct, 0%) / 100%); } .cl-aetheris-step .dot { width: 32px; height: 32px; font-size: .7rem; } .cl-aetheris-step .reward { font-size: .65rem; } } @media (max-width: 640px) { .cl-cart-item { grid-template-columns: 60px 1fr; row-gap: 10px; } .cl-cart-item-media { width: 60px; height: 60px; } .cl-cart-item .cl-cart-qty, .cl-cart-item .cl-cart-item-total, .cl-cart-item .cl-cart-remove { grid-column: 1 / -1; justify-self: end; } .cl-cart-item-total { text-align: right; } .cl-coupon-card { grid-template-columns: 70px 1fr; } .cl-coupon-left .pct { font-size: 1.4rem; } } /* ============================================================================ HERO V2 + MAÃ„ÂAZA/OYNA SPLIT KART GÃƒÂ¶rsel referansÃ„Â±na uygun premium minimal tasarÃ„Â±m ============================================================================ */ /* -------- HERO V2 -------- */ .cl-hero-v2 { position: relative; min-height: 480px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; padding: 30px 0 120px; margin-bottom: -80px; } .cl-hero-v2-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.45) 70%, rgba(248,250,252,.95) 100%); pointer-events: none; } .cl-hero-v2-title-bg { display: none; /* eski silik baÅŸlÄ±k artÄ±k yok */ font-size: clamp(4rem, 12vw, 9rem); font-weight: 900; letter-spacing: -.02em; color: rgba(255,255,255,.08); line-height: 1; user-select: none; text-transform: uppercase; } .cl-hero-v2-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; padding-top: 80px; } /* Yan badge (sol/saÃ„Å¸) */ .cl-hero-pill { display: flex; align-items: center; gap: 14px; background: rgba(6,78,59,.4); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 14px 22px; border-radius: 16px; color: #fff; text-decoration: none; box-shadow: 0 14px 40px -16px rgba(0,0,0,.4); transition: transform .25s, background .2s, border-color .2s; max-width: 360px; } .cl-hero-pill:hover { transform: translateY(-3px); background: rgba(6,78,59,.55); border-color: rgba(255,255,255,.18); } .cl-hero-pill.left { justify-self: end; flex-direction: row; } .cl-hero-pill.right { justify-self: start; } .cl-hero-pill-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cl-hero-pill-text strong { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: .01em; cursor: pointer; } .cl-hero-pill-text strong[data-copy]:hover { color: #6ee7b7; } .cl-hero-pill-text span { font-size: .78rem; color: rgba(255,255,255,.7); font-weight: 500; } .cl-hero-pill.right .cl-hero-pill-text strong { color: #fff; } .cl-hero-pill-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; background: rgba(255,255,255,.12); color: #fff; } .cl-hero-pill-ico.server { background: rgba(252,211,77,.18); color: #fbbf24; } .cl-hero-pill-ico.discord { background: rgba(88,101,242,.22); color: #a5b4fc; } /* Orta logo */ .cl-hero-v2-logo { width: 220px; height: 220px; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: transform .3s; } .cl-hero-v2-logo:hover { transform: scale(1.04); } .cl-hero-v2-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); } /* -------- MAÃ„ÂAZA / OYNA SPLIT KART -------- */ .cl-section--tight { padding: 30px 0 40px; } .cl-play-banner { position: relative; display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 30px; padding: 24px 36px; background: #ffffff; border: 1px solid rgba(15,27,51,.08); border-radius: 22px; box-shadow: 0 18px 40px -22px rgba(15,27,51,.18); overflow: visible; z-index: 3; } .cl-play-char { position: relative; align-self: end; height: 200px; margin-bottom: -24px; } .cl-play-char img { height: 100%; width: auto; filter: drop-shadow(0 18px 24px rgba(15,27,51,.18)); } .cl-play-text { min-width: 0; font-family: 'Inter', 'Segoe UI', sans-serif; } .cl-play-text h2 { margin: 0 0 6px; font-family: 'Poppins', sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--cl-ink); letter-spacing: -.01em; } .cl-play-text p { margin: 0; font-family: 'Inter', 'Segoe UI', sans-serif; color: var(--cl-muted); font-size: .92rem; line-height: 1.55; max-width: 540px; } .cl-play-action { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 200px; } .cl-play-ip { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: .95rem; font-weight: 700; color: var(--cl-blue); text-align: center; letter-spacing: .02em; } .cl-play-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; background: linear-gradient(180deg, var(--cl-blue), var(--cl-blue-dark, #1d4ed8)); color: #fff; border: none; border-radius: 14px; font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(37,99,235,.4); transition: transform .15s, filter .15s, box-shadow .15s; letter-spacing: .01em; } .cl-play-copy:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 30px -10px rgba(37,99,235,.55); } .cl-play-copy:active { transform: translateY(0); } .cl-play-copy.copied { background: linear-gradient(180deg, #34d399, #10b981); color: #fff; } /* Eski split stillerini gizle (artÄ±k kullanÄ±lmÄ±yor) */ .cl-split, .cl-split-store, .cl-split-play, .cl-split-cta { display: none !important; } /* Sol: MaÃ„Å¸aza kartÃ„Â± */ .cl-split-store { position: relative; display: flex; align-items: center; gap: 20px; padding: 30px 36px; background: #fff; border-radius: 22px; border: 1px solid rgba(15,27,51,.06); box-shadow: 0 18px 40px -22px rgba(15,27,51,.15); overflow: hidden; text-decoration: none; color: var(--cl-ink); transition: transform .25s, box-shadow .25s; } .cl-split-store:hover { transform: translateY(-3px); box-shadow: 0 24px 60px -22px rgba(15,27,51,.25); } .cl-split-store-bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(16,185,129,.06), transparent 50%), radial-gradient(circle at 80% 30%, rgba(59,130,246,.05), transparent 50%); pointer-events: none; } .cl-split-cta { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; border-radius: 999px; font-weight: 700; font-size: .92rem; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(16,185,129,.6); transition: transform .15s, filter .15s; flex-shrink: 0; } .cl-split-cta:hover { filter: brightness(1.08); transform: translateY(-1px); } .cl-split-store-text { position: relative; flex: 1; } .cl-split-store-text h2 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; color: var(--cl-ink); } .cl-split-store-text p { margin: 0; color: var(--cl-muted); font-size: .92rem; line-height: 1.5; } /* SaÃ„Å¸: Oyna kartÃ„Â± */ .cl-split-play { position: relative; background: #f1f5f9; border: 1px solid rgba(15,27,51,.06); border-radius: 22px; color: var(--cl-ink); font-size: 1.5rem; font-weight: 800; cursor: pointer; transition: transform .25s, background .25s, box-shadow .25s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 140px; box-shadow: 0 8px 24px -16px rgba(15,27,51,.15); font-family: inherit; } .cl-split-play:hover { background: #e2e8f0; transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15,27,51,.25); } .cl-split-play-label { color: var(--cl-ink); } .cl-split-play i { font-size: 1.4rem; color: var(--cl-muted); } .cl-split-play:hover i { color: var(--cl-blue); } /* -------- Responsive -------- */ @media (max-width: 980px) { .cl-hero-v2-inner { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding-top: 40px; } .cl-hero-pill.left, .cl-hero-pill.right { justify-self: center; } .cl-hero-v2-logo { width: 160px; height: 160px; } .cl-hero-v2 { padding-bottom: 100px; } .cl-play-banner { grid-template-columns: 1fr; text-align: center; padding: 22px 22px; gap: 20px; } .cl-play-char { justify-self: center; height: 160px; margin-bottom: -22px; } .cl-play-text p { max-width: none; margin-left: auto; margin-right: auto; } .cl-play-action { min-width: 0; align-items: center; } .cl-play-copy { width: 100%; max-width: 280px; } } @media (max-width: 560px) { .cl-hero-pill { padding: 12px 16px; max-width: 100%; width: 100%; } .cl-hero-pill-text strong { font-size: .95rem; } .cl-play-text h2 { font-size: 1.2rem; } .cl-play-banner { border-radius: 18px; padding: 20px 18px; } } /* ============================================================ NAVBAR BRAND (logo + isim) Ã¢â‚¬â€ font ve hizalama uyumu ============================================================ */ /* (Eski override'lar koyu navbar iÃ§in kaldÄ±rÄ±ldÄ± â€” yukarÄ±daki ana stiller kullanÄ±lÄ±r) */ /* Logo gÃƒÂ¶rseli varsa marka yazÃ„Â±sÃ„Â± yanÃ„Â±nda dursun, mavi kare gizli kalsÃ„Â±n */ .cl-theme .cl-nav-brand:has(.navbar-logo-img) .cl-nav-brand-mark { display: none; } /* Nav menÃƒÂ¼ linkleri Inter font uyumu */ .cl-theme .nav-menu-link, .cl-theme .nav-menu a { font-family: 'Inter', 'Segoe UI', sans-serif; } @media (max-width: 640px) { .cl-theme .cl-nav-brand-text { display: none; } } /* ============================================================================ HERO V3 Ã¢â‚¬â€ Premium, gÃƒÂ¶rsel referansÃ„Â±na uygun Sol metin + butonlar / Arka plan gÃƒÂ¶rseli / Alt yapÃ„Â±Ã…Å¸kan CTA bant ============================================================================ */ .cl-hero-v3 { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 80px; } /* Sol taraf okunsun diye soldan koyulaÃ…Å¸an gradient overlay */ .cl-hero-v3-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.55) 35%, rgba(2,6,23,.15) 65%, rgba(2,6,23,0) 100%), linear-gradient(180deg, rgba(2,6,23,.25) 0%, transparent 30%, rgba(2,6,23,.55) 100%); pointer-events: none; } .cl-hero-v3-inner { position: relative; z-index: 2; padding: 30px 0 200px; } /* -------- Sol metin -------- */ .cl-hero-v3-text { max-width: 560px; color: #fff; } .cl-hero-v3-title { font-family: 'Poppins', sans-serif; font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 18px; color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.5); } .cl-hero-v3-title .hl { background: linear-gradient(135deg, #3b82f6, #6366f1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cl-hero-v3-desc { margin: 0 0 28px; font-size: 1rem; color: rgba(226,232,240,.88); line-height: 1.6; font-family: 'Inter', 'Segoe UI', sans-serif; text-shadow: 0 4px 16px rgba(0,0,0,.4); } /* -------- Butonlar -------- */ .cl-hero-v3-actions { display: flex; flex-wrap: wrap; gap: 12px; } .cl-hero-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: .95rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: transform .15s, filter .15s, box-shadow .15s; font-family: inherit; } .cl-hero-btn.primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 14px 28px -10px rgba(59,130,246,.6); } .cl-hero-btn.primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 18px 34px -10px rgba(59,130,246,.75); } .cl-hero-btn.primary.copied { background: linear-gradient(135deg, #10b981, #059669); } .cl-hero-btn.dark { background: rgba(15,23,42,.82); color: #fff; border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cl-hero-btn.dark:hover { transform: translateY(-2px); background: rgba(15,23,42,.95); border-color: rgba(255,255,255,.22); } /* -------- Alt CTA bant -------- */ .cl-hero-v3-cta { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(10,13,21,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.08); z-index: 3; } .cl-hero-v3-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 22px 0; } .cl-hero-v3-cta-text { min-width: 0; } .cl-hero-v3-cta-text h2 { margin: 0 0 4px; font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -.01em; } .cl-hero-v3-cta-text p { margin: 0; font-family: 'Inter', 'Segoe UI', sans-serif; color: rgba(226,232,240,.7); font-size: .88rem; line-height: 1.5; max-width: 720px; } .cl-hero-v3-cta-ip { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 26px; background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; box-shadow: 0 10px 24px -8px rgba(59,130,246,.55); transition: transform .15s, filter .15s, box-shadow .15s; min-width: 200px; overflow: hidden; } .cl-hero-v3-cta-ip:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px -8px rgba(59,130,246,.7); } .cl-hero-v3-cta-ip strong { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: .01em; } .cl-hero-v3-cta-ip span:not(.copied-flag) { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: .72rem; color: rgba(255,255,255,.78); font-weight: 500; } .cl-hero-v3-cta-ip .copied-flag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 700; font-size: .95rem; opacity: 0; transition: opacity .25s; pointer-events: none; } .cl-hero-v3-cta-ip.copied .copied-flag { opacity: 1; } /* -------- Eski hero-v2 stillerini kapat -------- */ .cl-hero-v2, .cl-play-banner, .cl-hero-pill { /* artÃ„Â±k kullanÃ„Â±lmÃ„Â±yor */ } /* -------- Responsive -------- */ @media (max-width: 900px) { .cl-hero-v3 { min-height: 540px; padding-top: 40px; } .cl-hero-v3-inner { padding: 20px 0 220px; } .cl-hero-v3-text { max-width: 100%; text-align: center; } .cl-hero-v3-actions { justify-content: center; } .cl-hero-v3-cta-inner { grid-template-columns: 1fr; text-align: center; } .cl-hero-v3-cta-text p { margin-left: auto; margin-right: auto; } .cl-hero-v3-cta-ip { width: 100%; } } @media (max-width: 560px) { .cl-hero-v3 { min-height: 500px; } .cl-hero-v3-title { font-size: 1.75rem; } .cl-hero-v3-desc { font-size: .92rem; } .cl-hero-btn { padding: 12px 20px; font-size: .88rem; } .cl-hero-v3-cta-text h2 { font-size: 1.05rem; } } /* ============================================================================ FOOTER Ã¢â‚¬â€ GÃƒÂ¶rsel referansÃ„Â±na uygun 4 sÃƒÂ¼tunlu aÃƒÂ§Ã„Â±k tema premium ============================================================================ */ .cl-footer { background: #f8fafc; border-top: 1px solid rgba(15,27,51,.08); padding: 60px 0 26px; color: var(--cl-ink); font-family: 'Inter', 'Segoe UI', sans-serif; margin-top: 60px; } .cl-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 42px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid rgba(15,27,51,.08); } /* -- 1) Brand kolonu -- */ .cl-footer-brand { min-width: 0; } .cl-footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; text-decoration: none; transition: transform .2s; } .cl-footer-logo:hover { transform: translateY(-2px); } .cl-footer-logo img { height: 52px; width: auto; } .cl-footer-logo-mark { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--cl-blue), var(--cl-blue-dark, #1d4ed8)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: 0 8px 18px -8px rgba(37,99,235,.55); } .cl-footer-about { margin: 0 0 18px; color: var(--cl-muted); font-size: .9rem; line-height: 1.6; max-width: 320px; } .cl-footer-mojang, .cl-footer-product { margin: 0 0 6px; color: #94a3b8; font-size: .8rem; line-height: 1.55; max-width: 320px; } .cl-footer-product { margin-top: 14px; font-size: .78rem; } /* -- Kolonlar -- */ .cl-footer-col { min-width: 0; } .cl-footer-col h4 { margin: 0 0 18px; font-family: 'Poppins', sans-serif; font-size: .88rem; font-weight: 800; color: var(--cl-ink); letter-spacing: .05em; } .cl-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .cl-footer-col ul a { color: var(--cl-muted); text-decoration: none; font-size: .92rem; font-weight: 500; transition: color .15s, transform .15s; display: inline-flex; align-items: center; gap: 8px; } .cl-footer-col ul a:hover { color: var(--cl-blue); transform: translateX(2px); } /* Sosyal medya ikonlarÃ„Â± */ .cl-footer-social-list a i { width: 18px; text-align: center; color: var(--cl-blue); font-size: 1rem; } .cl-footer-social-list a:hover i { color: var(--cl-blue-dark, #1d4ed8); } .cl-footer-empty { color: #94a3b8; font-size: .85rem; font-style: italic; } /* -- Alt bant -- */ .cl-footer-bottom { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 24px; color: var(--cl-muted); font-size: .85rem; text-align: center; } .cl-footer-bottom strong { color: var(--cl-ink); font-weight: 700; } .cl-footer-sep { color: #cbd5e1; } /* Eski footer artÃ„Â±klarÃ„Â±nÃ„Â± gizle */ .cl-footer ~ .footer { display: none !important; } /* -- Responsive -- */ @media (max-width: 980px) { .cl-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .cl-footer-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .cl-footer { padding: 40px 0 22px; } .cl-footer-grid { grid-template-columns: 1fr; gap: 30px; } .cl-footer-about, .cl-footer-mojang, .cl-footer-product { max-width: 100%; } .cl-footer-bottom { flex-direction: column; gap: 4px; } .cl-footer-sep { display: none; } } /* ============================================================================ STORE Ã¢â‚¬â€ Dik kart grid (gÃƒÂ¶rsel referansÃ„Â±na uygun) ============================================================================ */ .cl-store-content { display: block; padding: 8px 0 60px; } .cl-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } /* -- Sunucu / Kategori kartlarÃ„Â± (dikey) -- */ .cl-store-card { display: flex; flex-direction: column; background: #f8fafc; border: 1px solid rgba(15,27,51,.08); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--cl-ink); transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; } .cl-store-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.3); box-shadow: 0 22px 50px -22px rgba(15,27,51,.25); } .cl-store-card-media { aspect-ratio: 16 / 9; width: 100%; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px; } .cl-store-card-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; transition: transform .35s ease; } .cl-store-card:hover .cl-store-card-media img { transform: scale(1.05); } .cl-store-card-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: var(--cl-blue); font-size: 3rem; border-radius: 12px; } .cl-store-card-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 20px; } .cl-store-card-body h3 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--cl-ink); letter-spacing: .01em; } .cl-store-card-arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(37,99,235,.1); color: var(--cl-blue); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; transition: background .15s, transform .25s, color .15s; } .cl-store-card:hover .cl-store-card-arrow { background: var(--cl-blue); color: #fff; transform: translateX(3px); } /* -- ÃƒÅ“rÃƒÂ¼n listesi sayfasÃ„Â±ndaki baÃ…Å¸lÃ„Â±k -- */ .cl-store-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 24px; } .cl-store-head-ico { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: #eef2ff; } .cl-store-head-ico.fallback { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: var(--cl-blue); font-size: 1.3rem; } .cl-store-head h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--cl-ink); } /* -- Eski sidebar/layout kalÃ„Â±ntÃ„Â±larÃ„Â±nÃ„Â± gizle -- */ .cl-store-layout, .cl-store-sidebar, .cl-store-main, .cl-list-row { /* artÃ„Â±k kullanÃ„Â±lmÃ„Â±yor */ } /* -- Responsive -- */ @media (max-width: 720px) { .cl-store-grid { grid-template-columns: 1fr; gap: 18px; } .cl-store-card-body { padding: 16px 18px 18px; } .cl-store-card-body h3 { font-size: .98rem; } .cl-store-head h2 { font-size: 1.25rem; } } /* ============================================================================ HERO V4 Ã¢â‚¬â€ OrtalÃ„Â± (gÃƒÂ¶rsel referansÃ„Â±na uygun) Tam geniÃ…Å¸lik arkaplan + ortalanmÃ„Â±Ã…Å¸ logo + baÃ…Å¸lÃ„Â±k + aÃƒÂ§Ã„Â±klama + beyaz IP pill ============================================================================ */ .cl-hero-v4 { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; min-height: 720px; display: flex; align-items: center; justify-content: center; } .cl-hero-v4-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%), linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 30%, rgba(0,0,0,.35) 100%); pointer-events: none; } .cl-hero-v4-inner { position: relative; z-index: 2; text-align: center; padding: 80px 20px 90px; width: 100%; } /* OrtalÃ„Â± logo */ .cl-hero-v4-logo { width: 200px; height: 200px; margin: 0 auto 24px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); transition: transform .3s; } .cl-hero-v4-logo:hover { transform: scale(1.04); } .cl-hero-v4-logo img { width: 100%; height: 100%; object-fit: contain; } /* BÃƒÂ¼yÃƒÂ¼k baÃ…Å¸lÃ„Â±k */ .cl-hero-v4-title { font-family: 'Poppins', sans-serif; font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 900; color: #fff; margin: 0 0 18px; line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 4px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5); text-transform: uppercase; } .cl-hero-v4-title .hl { color: #3b82f6; background: linear-gradient(135deg, #60a5fa, #3b82f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* gradient kullanÃ„Â±rken de gÃƒÂ¼ÃƒÂ§lÃƒÂ¼ gÃƒÂ¶rÃƒÂ¼nsÃƒÂ¼n diye glow */ filter: drop-shadow(0 0 18px rgba(59,130,246,.35)); } /* AÃƒÂ§Ã„Â±klama */ .cl-hero-v4-desc { font-family: 'Inter', 'Segoe UI', sans-serif; font-size: clamp(.95rem, 1.4vw, 1.1rem); color: rgba(255,255,255,.85); margin: 0 0 32px; line-height: 1.6; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,.5); max-width: 720px; margin-left: auto; margin-right: auto; } /* Beyaz IP pill butonu */ .cl-hero-v4-ip { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 20px 50px; background: #fff; color: var(--cl-ink); border: none; border-radius: 999px; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 800; letter-spacing: -.01em; box-shadow: 0 20px 50px -15px rgba(0,0,0,.5), 0 0 0 8px rgba(255,255,255,.08), inset 0 -3px 0 rgba(15,27,51,.08); transition: transform .25s, box-shadow .25s; overflow: hidden; } .cl-hero-v4-ip:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 28px 60px -18px rgba(0,0,0,.55), 0 0 0 10px rgba(255,255,255,.12), inset 0 -3px 0 rgba(15,27,51,.08); } .cl-hero-v4-ip:active { transform: translateY(-1px) scale(1); } .cl-hero-v4-ip i { color: var(--cl-blue); font-size: .95em; } .cl-hero-v4-ip-text { color: var(--cl-ink); } /* KopyalandÃ„Â± overlay */ .cl-hero-v4-ip .copied-flag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-weight: 800; opacity: 0; transition: opacity .25s; pointer-events: none; border-radius: inherit; } .cl-hero-v4-ip.copied .copied-flag { opacity: 1; } /* Eski hero versiyonlarÃ„Â±nÃ„Â± gizle (geriye dÃƒÂ¶nÃƒÂ¼k uyum iÃƒÂ§in) */ .cl-hero-v3, .cl-hero-v2 { /* artÃ„Â±k kullanÃ„Â±lmÃ„Â±yor */ } /* -------- Responsive -------- */ @media (max-width: 768px) { .cl-hero-v4 { min-height: 580px; } .cl-hero-v4-inner { padding: 60px 16px 70px; } .cl-hero-v4-logo { width: 150px; height: 150px; margin-bottom: 20px; } .cl-hero-v4-ip { padding: 16px 32px; } } @media (max-width: 480px) { .cl-hero-v4 { min-height: 520px; } .cl-hero-v4-logo { width: 120px; height: 120px; } .cl-hero-v4-ip { padding: 14px 26px; gap: 10px; } .cl-hero-v4-desc { font-size: .88rem; } } /* ============================================================================ HERO V4 Ã¢â‚¬â€ Glow efektleri + alt dalga geÃƒÂ§iÃ…Å¸i ============================================================================ */ /* -------- Glow Ã„Â±Ã…Å¸Ã„Â±ltÃ„Â±larÃ„Â± (arkaplan ÃƒÂ¼zerinde yumuÃ…Å¸ak renkli alanlar) -------- */ .cl-hero-v4-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); z-index: 1; opacity: .55; will-change: transform; } .cl-hero-v4-glow--1 { width: 520px; height: 520px; top: -120px; left: -100px; background: radial-gradient(circle, rgba(59,130,246,.55) 0%, transparent 70%); animation: cl-hero-float 14s ease-in-out infinite; } .cl-hero-v4-glow--2 { width: 440px; height: 440px; bottom: -80px; right: -80px; background: radial-gradient(circle, rgba(139,92,246,.45) 0%, transparent 70%); animation: cl-hero-float 17s ease-in-out infinite reverse; } .cl-hero-v4-glow--3 { width: 360px; height: 360px; top: 40%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(99,102,241,.32) 0%, transparent 70%); animation: cl-hero-pulse 8s ease-in-out infinite; opacity: .45; } @keyframes cl-hero-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 40px) scale(.95); } } @keyframes cl-hero-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .35; } 50% { transform: translate(-50%, -50%) scale(1.25); opacity: .55; } } /* Glow'larÃ„Â±n iÃƒÂ§eriÃ„Å¸in ÃƒÂ¶nÃƒÂ¼ne geÃƒÂ§mesini ÃƒÂ¶nle */ .cl-hero-v4-inner { z-index: 3; } /* -------- Alt dalga geÃƒÂ§iÃ…Å¸i (hero Ã¢â€ â€™ sonraki bÃƒÂ¶lÃƒÂ¼m) -------- */ .cl-hero-v4 { /* sonraki section'a sÃ„Â±Ã„Å¸ taÃ…Å¸ma iÃƒÂ§in padding-bottom artÃ„Â±r */ padding-bottom: 0 !important; } .cl-hero-v4-wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 4; pointer-events: none; } .cl-hero-v4-wave svg { display: block; width: 100%; height: 140px; } .cl-hero-v4-wave .cl-wave-back, .cl-hero-v4-wave .cl-wave-mid, .cl-hero-v4-wave .cl-wave-front { fill: var(--cl-bg, #f8fafc); } /* ÃœÃ§ katman farklÄ± tonlarda â†’ derinlik hissi (sabit, animasyon yok) */ .cl-hero-v4-wave .cl-wave-back { fill: #e6ecf6; } .cl-hero-v4-wave .cl-wave-mid { fill: #eef3fb; } .cl-hero-v4-wave .cl-wave-front { fill: #f3f6fc; } /* Ä°Ã§erik dalganÄ±n altÄ±na gizlenmesin */ .cl-hero-v4 { padding-bottom: 90px !important; } /* GÃ¶rsel Ã¼stÃ¼ne ek glow / vinyet efekti */ .cl-hero-v4-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(59,130,246,.18) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(139,92,246,.18) 0%, transparent 55%), radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 100%), linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 35%, rgba(0,0,0,.4) 100%) !important; } /* Vinyet kenar gÃ¶lgesi */ .cl-hero-v4::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%); pointer-events: none; z-index: 2; } /* Mobil â€” dalga Ã¶lÃ§eklenir, glow'lar kÃ¼Ã§Ã¼lÃ¼r */ @media (max-width: 768px) { .cl-hero-v4-wave svg { height: 90px; } .cl-hero-v4 { padding-bottom: 60px !important; } .cl-hero-v4-glow--1 { width: 360px; height: 360px; } .cl-hero-v4-glow--2 { width: 320px; height: 320px; } .cl-hero-v4-glow--3 { width: 240px; height: 240px; } } @media (prefers-reduced-motion: reduce) { .cl-hero-v4-glow { animation: none; } } /* ============================================================================ PROFIL > AYARLAR Ã¢â‚¬â€ Discord baÃ„Å¸lantÃ„Â± kartÃ„Â± ============================================================================ */ .dc-link-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; background: linear-gradient(135deg, rgba(88,101,242,.08), rgba(99,102,241,.04)); border: 1px solid rgba(88,101,242,.2); border-radius: 14px; } .dc-link-info { display: flex; align-items: center; gap: 14px; min-width: 0; } .dc-link-ico { width: 48px; height: 48px; border-radius: 12px; background: #5865f2; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; box-shadow: 0 10px 22px -8px rgba(88,101,242,.55); flex-shrink: 0; } .dc-link-info > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dc-link-info strong { color: var(--cl-navy, #0f1b33); font-family: 'Poppins', sans-serif; font-size: 1rem; } .dc-link-info span { color: var(--cl-muted); font-size: .82rem; } .dc-link-info code { background: rgba(88,101,242,.12); color: #5865f2; padding: 1px 8px; border-radius: 5px; font-size: .78rem; font-family: ui-monospace, monospace; } /* ============================================================================ LEADERBOARDS â€” SÄ±ralama sayfasÄ± (cl-lb) ============================================================================ */ .cl-lb { padding: 30px 0 80px; } .cl-lb-wrap { max-width: 1320px; } .cl-lb-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; margin-top: 20px; } /* -------------------- Sol sidebar -------------------- */ .cl-lb-side { background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: 16px; padding: 14px; position: sticky; top: 90px; box-shadow: 0 4px 18px -8px rgba(15, 27, 51, .08); } .cl-lb-side-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 14px; border-bottom: 1px solid var(--cl-border); margin-bottom: 10px; font-weight: 700; color: var(--cl-ink); font-family: 'Poppins', sans-serif; } .cl-lb-side-head i { color: var(--cl-blue); font-size: 0.95rem; background: rgba(37, 99, 235, .1); padding: 6px 8px; border-radius: 8px; } .cl-lb-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .cl-lb-side-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--cl-muted); text-decoration: none; font-weight: 500; transition: all .2s ease; border: 1px solid transparent; } .cl-lb-side-item:hover { background: var(--cl-bg-soft); color: var(--cl-ink); } .cl-lb-side-item.active { background: rgba(37, 99, 235, .08); color: var(--cl-blue); border-color: rgba(37, 99, 235, .25); font-weight: 600; } .cl-lb-side-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: #e5e7eb; color: #6b7280; border-radius: 8px; font-size: 0.9rem; } .cl-lb-side-item.active .cl-lb-side-icon { background: var(--cl-blue); color: #fff; } .cl-lb-side-empty { padding: 12px; color: var(--cl-muted); font-size: 0.9rem; text-align: center; } /* -------------------- SaÄŸ panel -------------------- */ .cl-lb-panel { background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px -8px rgba(15, 27, 51, .08); } .cl-lb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--cl-border); } .cl-lb-panel-title { display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--cl-ink); font-size: 1.05rem; } .cl-lb-panel-title i { color: var(--cl-blue); background: rgba(37, 99, 235, .1); padding: 8px 10px; border-radius: 10px; font-size: 0.95rem; } /* Arama */ .cl-lb-search { display: flex; gap: 10px; align-items: stretch; } .cl-lb-search-wrap { display: flex; align-items: center; gap: 10px; background: var(--cl-bg-soft); border: 1px solid var(--cl-border); border-radius: 12px; padding: 10px 16px; min-width: 320px; } .cl-lb-search-wrap i { color: var(--cl-muted); } .cl-lb-search-wrap input { border: 0; background: transparent; outline: 0; flex: 1; color: var(--cl-text); font-size: 0.95rem; } .cl-lb-search-wrap input::placeholder { color: var(--cl-muted); } .cl-lb-search-btn { border: 0; background: var(--cl-blue); color: #fff; padding: 0 22px; border-radius: 12px; font-weight: 700; cursor: pointer; font-family: 'Poppins', sans-serif; transition: all .2s ease; } .cl-lb-search-btn:hover { background: var(--cl-blue-dark); } /* Tablo */ .cl-lb-table-wrap { overflow-x: auto; } .cl-lb-table { width: 100%; border-collapse: separate; border-spacing: 0 12px; padding: 8px 26px 26px; } .cl-lb-table thead th { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--cl-muted); letter-spacing: 0.08em; padding: 14px 10px; border-bottom: 1px solid var(--cl-border); vertical-align: middle; } .cl-lb-table thead th.th-rank { text-align: left; padding-left: 0; width: 80px; } .cl-lb-table thead th.th-user { text-align: left; } .cl-lb-th-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color .2s ease; } .cl-lb-th-link:hover { color: var(--cl-blue); } .th-sort-active .cl-lb-th-link { color: var(--cl-blue); } .cl-lb-table thead th i { font-size: 0.7rem; opacity: 0.6; } .cl-lb-table tbody tr { background: #fff; box-shadow: 0 2px 10px -4px rgba(15, 27, 51, .06); border-radius: 14px; transition: transform .15s ease, box-shadow .2s ease; } .cl-lb-table tbody tr:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .14); } .cl-lb-table tbody td { padding: 14px 10px; text-align: center; vertical-align: middle; background: var(--cl-bg-soft); border-top: 1px solid var(--cl-border); border-bottom: 1px solid var(--cl-border); } .cl-lb-table tbody td:first-child { border-left: 1px solid var(--cl-border); border-top-left-radius: 14px; border-bottom-left-radius: 14px; text-align: left; padding-left: 20px; } .cl-lb-table tbody td:last-child { border-right: 1px solid var(--cl-border); border-top-right-radius: 14px; border-bottom-right-radius: 14px; } /* Rank */ .cl-lb-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 6px 12px; background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: 999px; color: var(--cl-muted); font-weight: 700; font-size: 0.85rem; } .cl-lb-medal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; color: #fff; box-shadow: 0 4px 12px -2px rgba(0,0,0,.18); } .cl-lb-medal.medal-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); } .cl-lb-medal.medal-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); } .cl-lb-medal.medal-3 { background: linear-gradient(135deg, #f97316, #c2410c); } /* User */ .cl-lb-user { display: flex; align-items: center; gap: 12px; text-align: left; } .cl-lb-avatar { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: #e5e7eb; } .cl-lb-user strong { color: var(--cl-ink); font-weight: 700; font-size: 0.95rem; } /* Pill */ .cl-lb-pill { display: inline-block; padding: 7px 18px; background: #fff; border: 1px solid var(--cl-border); border-radius: 999px; color: var(--cl-ink); font-weight: 700; font-size: 0.9rem; min-width: 56px; } .cl-lb-pill-time { background: var(--cl-bg); font-size: 0.8rem; padding: 4px 14px; min-width: 0; font-weight: 600; color: var(--cl-text); } .cl-lb-time { display: flex; flex-direction: column; gap: 4px; align-items: center; } /* BoÅŸ durum */ .cl-lb-empty { text-align: center !important; padding: 60px 20px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } .cl-lb-empty i { font-size: 2.4rem; color: var(--cl-blue); opacity: 0.4; display: block; margin-bottom: 12px; } .cl-lb-empty span { display: block; color: var(--cl-ink); font-weight: 600; font-size: 1rem; margin-bottom: 4px; } .cl-lb-empty small { color: var(--cl-muted); } /* Responsive */ @media (max-width: 980px) { .cl-lb-layout { grid-template-columns: 1fr; } .cl-lb-side { position: static; } .cl-lb-panel-head { flex-direction: column; align-items: stretch; gap: 14px; } .cl-lb-search-wrap { min-width: 0; } } @media (max-width: 720px) { .cl-lb-panel-head { padding: 16px; } .cl-lb-table { padding: 8px 12px 14px; } .cl-lb-table thead th { font-size: 0.65rem; padding: 10px 6px; } .cl-lb-table tbody td { padding: 10px 6px; } .cl-lb-pill { padding: 5px 12px; font-size: 0.8rem; min-width: 0; } } /* ============================================================================ STAFF INFORMATION â€” Yetkili detay sayfasÄ± (cl-si) ============================================================================ */ .cl-staff-info { padding: 30px 0 80px; } .cl-staff-info-wrap { max-width: 1180px; } /* --- Hero / Kapak --- */ .cl-si-hero { --clr: #2563eb; position: relative; margin-top: 20px; border-radius: 24px; overflow: hidden; background: var(--cl-card); border: 1px solid var(--cl-border); box-shadow: 0 10px 40px -18px rgba(15, 27, 51, .15); } .cl-si-hero-bg { position: absolute; inset: 0; height: 200px; background: radial-gradient(ellipse 70% 90% at 20% 10%, color-mix(in srgb, var(--clr) 35%, transparent) 0%, transparent 70%), radial-gradient(ellipse 80% 100% at 90% 0%, color-mix(in srgb, var(--clr) 22%, transparent) 0%, transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--clr) 18%, #fff) 0%, color-mix(in srgb, var(--clr) 6%, #fff) 100%); } .cl-si-hero-bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(15, 27, 51, .07) 1px, transparent 0); background-size: 22px 22px; opacity: .5; } .cl-si-hero-body { position: relative; display: flex; align-items: flex-end; gap: 28px; padding: 130px 36px 36px; flex-wrap: wrap; } /* Avatar */ .cl-si-avatar-wrap { position: relative; flex-shrink: 0; } .cl-si-avatar { width: 160px; height: 160px; border-radius: 24px; border: 6px solid #fff; box-shadow: 0 12px 32px -10px rgba(15, 27, 51, .25); background: #e5e7eb; object-fit: cover; display: block; } .cl-si-status { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; } .cl-si-status.online { background: #22c55e; color: #fff; } .cl-si-status.offline { background: #94a3b8; color: #fff; } /* Head */ .cl-si-head { flex: 1; min-width: 240px; } .cl-si-role-pill { display: inline-block; background: var(--clr); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; padding: 6px 14px; border-radius: 999px; margin-bottom: 12px; } .cl-si-name { font-family: 'Poppins', sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--cl-ink); margin: 0 0 4px; line-height: 1.1; } .cl-si-uname { color: var(--cl-muted); font-size: 0.95rem; font-weight: 500; } /* Sosyal */ .cl-si-socials { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .cl-si-social { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--cl-bg-soft); border: 1px solid var(--cl-border); color: var(--cl-ink); text-decoration: none; transition: all .2s ease; font-size: 1.05rem; } .cl-si-social:hover { background: var(--clr); color: #fff; border-color: var(--clr); transform: translateY(-2px); } /* --- Ä°Ã§erik grid --- */ .cl-si-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; margin-top: 22px; } .cl-si-main { min-width: 0; } .cl-si-side { display: flex; flex-direction: column; gap: 18px; } /* Bio */ .cl-si-bio { padding: 22px 26px !important; color: var(--cl-text); line-height: 1.7; } .cl-si-bio-empty { text-align: center; color: var(--cl-muted); padding: 30px 10px; margin: 0; } .cl-si-bio-empty i { display: block; font-size: 2rem; color: var(--cl-blue); opacity: .3; margin-bottom: 10px; } /* Info paneli */ .cl-si-info { padding: 18px 22px !important; } .cl-si-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--cl-border); } .cl-si-info-row:last-child { border-bottom: 0; } .cl-si-info-key { display: flex; align-items: center; gap: 8px; color: var(--cl-muted); font-size: 0.88rem; font-weight: 500; } .cl-si-info-key i { color: var(--cl-blue); width: 16px; text-align: center; } .cl-si-info-val { color: var(--cl-ink); font-weight: 600; font-size: 0.9rem; text-align: right; } /* CTA */ .cl-si-cta { background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-dark) 100%); color: #fff; border-radius: 18px; padding: 22px 24px; text-align: center; box-shadow: 0 10px 28px -10px rgba(37, 99, 235, .45); } .cl-si-cta h4 { font-family: 'Poppins', sans-serif; font-size: 1.05rem; margin: 0 0 6px; color: #fff; } .cl-si-cta p { color: rgba(255, 255, 255, .85); font-size: 0.88rem; margin: 0 0 14px; } .cl-si-cta .cl-btn { background: #fff; color: var(--cl-blue); } .cl-si-cta .cl-btn:hover { background: #f1f5f9; } /* DiÄŸer yetkililer */ .cl-si-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 6px; } .cl-si-other { --clr: #2563eb; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--cl-border); background: var(--cl-bg-soft); text-decoration: none; transition: all .2s ease; position: relative; overflow: hidden; } .cl-si-other::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--clr); opacity: 0; transition: opacity .2s ease; } .cl-si-other:hover { transform: translateY(-2px); border-color: var(--clr); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--clr) 45%, transparent); } .cl-si-other:hover::before { opacity: 1; } .cl-si-other img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #e5e7eb; } .cl-si-other strong { display: block; color: var(--cl-ink); font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; } .cl-si-other span { color: var(--cl-muted); font-size: 0.78rem; } /* Responsive */ @media (max-width: 920px) { .cl-si-grid { grid-template-columns: 1fr; } .cl-si-hero-body { padding: 110px 22px 26px; gap: 20px; } .cl-si-avatar { width: 130px; height: 130px; } .cl-si-name { font-size: 1.6rem; } } @media (max-width: 600px) { .cl-si-hero-body { flex-direction: column; align-items: center; text-align: center; } .cl-si-head { width: 100%; } .cl-si-socials { justify-content: center; } .cl-si-others { grid-template-columns: 1fr; } } /* ============================================================================ LEGAL â€” SÃ¶zleÅŸme/Politika sayfalarÄ± (cl-legal) ============================================================================ */ .cl-legal { padding: 30px 0 80px; } .cl-legal-wrap { max-width: 980px; } .cl-legal-paper { background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: 22px; padding: 48px 56px; margin-top: 20px; box-shadow: 0 10px 40px -18px rgba(15, 27, 51, .12); } /* Header */ .cl-legal-head { display: flex; align-items: center; gap: 22px; padding-bottom: 28px; border-bottom: 1px solid var(--cl-border); margin-bottom: 32px; } .cl-legal-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--cl-blue) 0%, var(--cl-blue-bright) 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; box-shadow: 0 12px 28px -10px rgba(37, 99, 235, .45); flex-shrink: 0; } .cl-legal-head h1 { font-family: 'Poppins', sans-serif; font-size: 1.85rem; font-weight: 800; color: var(--cl-ink); margin: 0 0 6px; } .cl-legal-sub { color: var(--cl-muted); font-size: 0.9rem; margin: 0; } /* Sections */ .cl-legal-section { margin-bottom: 30px; } .cl-legal-section:last-child { margin-bottom: 0; } .cl-legal-section h2 { font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--cl-ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--cl-blue); display: inline-block; } .cl-legal-section h3 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600; color: var(--cl-ink); margin: 18px 0 10px; } .cl-legal-section p { color: var(--cl-text); line-height: 1.75; margin: 0 0 12px; font-size: 0.96rem; } .cl-legal-section ul { margin: 0 0 12px; padding-left: 20px; } .cl-legal-section ul li { color: var(--cl-text); line-height: 1.8; font-size: 0.95rem; margin-bottom: 4px; } .cl-legal-section strong { color: var(--cl-ink); } .cl-legal-section a { color: var(--cl-blue); text-decoration: none; border-bottom: 1px dashed var(--cl-blue); transition: all .2s ease; } .cl-legal-section a:hover { color: var(--cl-blue-dark); border-bottom-style: solid; } .cl-legal-section code { background: var(--cl-bg-soft); color: var(--cl-ink); padding: 2px 7px; border-radius: 5px; font-family: 'Menlo', 'Consolas', monospace; font-size: 0.88em; border: 1px solid var(--cl-border); } .cl-legal-section blockquote { background: var(--cl-bg-soft); border-left: 4px solid var(--cl-blue); padding: 14px 20px; margin: 12px 0; border-radius: 0 10px 10px 0; color: var(--cl-text); font-style: italic; } /* Tablo (KVKK) */ .cl-legal-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0; border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; } .cl-legal-table thead th { background: var(--cl-bg-soft); text-align: left; padding: 12px 16px; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--cl-ink); font-size: 0.85rem; border-bottom: 1px solid var(--cl-border); } .cl-legal-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--cl-border); color: var(--cl-text); font-size: 0.92rem; line-height: 1.5; } .cl-legal-table tbody tr:last-child td { border-bottom: 0; } .cl-legal-table tbody td:first-child { font-weight: 600; color: var(--cl-ink); background: rgba(37, 99, 235, .03); width: 30%; } /* Alt nav â€” diÄŸer sÃ¶zleÅŸmeler */ .cl-legal-nav { background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: 18px; padding: 22px 24px; margin-top: 22px; box-shadow: 0 6px 22px -12px rgba(15, 27, 51, .1); } .cl-legal-nav h4 { font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--cl-muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; } .cl-legal-nav ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cl-legal-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cl-border); background: var(--cl-bg-soft); color: var(--cl-ink); text-decoration: none; font-weight: 500; font-size: 0.92rem; transition: all .2s ease; } .cl-legal-nav-item i:first-child { color: var(--cl-blue); font-size: 1rem; width: 22px; text-align: center; } .cl-legal-nav-item span { flex: 1; } .cl-legal-nav-arrow { color: var(--cl-muted); font-size: 0.8rem; } .cl-legal-nav-item:hover { background: rgba(37, 99, 235, .07); border-color: var(--cl-blue); transform: translateX(2px); } .cl-legal-nav-item.active { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; } .cl-legal-nav-item.active i { color: #fff; } /* Responsive */ @media (max-width: 720px) { .cl-legal-paper { padding: 30px 22px; border-radius: 16px; } .cl-legal-head { flex-direction: column; align-items: flex-start; gap: 14px; } .cl-legal-icon { width: 52px; height: 52px; font-size: 1.3rem; } .cl-legal-head h1 { font-size: 1.4rem; } .cl-legal-section h2 { font-size: 1.05rem; } .cl-legal-table { font-size: 0.85rem; } .cl-legal-nav ul { grid-template-columns: 1fr; } } /* ============================================================================ NAVBAR BÄ°LDÄ°RÄ°M DROPDOWN (cl-nav-bell) ============================================================================ */ .nav-notif-wrapper { position: relative; } .cl-nav-bell { position: relative; background: transparent; border: 0; cursor: pointer; padding: 8px 10px; color: var(--cl-ink, #16223d); font-size: 1.05rem; border-radius: 10px; transition: background .15s ease; } .cl-nav-bell:hover { background: rgba(37,99,235,.08); } .cl-nav-bell.has-items { color: var(--cl-blue, #2563eb); } .nav-notif-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: calc(100vw - 30px); background: #fff; border: 1px solid var(--cl-border, #e6ecf6); border-radius: 16px; box-shadow: 0 16px 50px -16px rgba(15,27,51,.25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s ease; z-index: 100; overflow: hidden; } .nav-notif-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cl-border, #e6ecf6); background: var(--cl-bg-soft, #eef3fb); } .notif-head strong { font-size: 0.95rem; color: var(--cl-ink, #0f1b33); } .notif-head strong i { color: var(--cl-blue, #2563eb); margin-right: 6px; } .notif-mark-all { font-size: 0.78rem; color: var(--cl-blue, #2563eb); text-decoration: none; font-weight: 500; } .notif-mark-all:hover { text-decoration: underline; } .notif-list { max-height: 420px; overflow-y: auto; } .notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--cl-border, #e6ecf6); text-decoration: none; color: inherit; transition: background .15s ease; position: relative; } .notif-item:hover { background: var(--cl-bg-soft, #eef3fb); } .notif-item.unread { background: rgba(37,99,235,.04); } .notif-item.unread::before { content: ""; position: absolute; left: 8px; top: 22px; width: 6px; height: 6px; background: var(--cl-blue, #2563eb); border-radius: 50%; } .notif-item:last-child { border-bottom: 0; } .notif-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--cl-bg-soft, #eef3fb); color: var(--cl-blue, #2563eb); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; } .notif-item.unread .notif-ico { background: var(--cl-blue, #2563eb); color: #fff; } .notif-body { flex: 1; min-width: 0; } .notif-body strong { display: block; color: var(--cl-ink, #0f1b33); font-size: 0.88rem; font-weight: 600; margin-bottom: 2px; } .notif-body span { color: var(--cl-muted, #64748b); font-size: 0.8rem; display: block; line-height: 1.4; } .notif-body time { color: var(--cl-muted, #94a3b8); font-size: 0.72rem; margin-top: 4px; display: block; } .notif-empty { text-align: center; padding: 40px 20px; color: var(--cl-muted, #94a3b8); } .notif-empty i { display: block; font-size: 1.8rem; margin-bottom: 8px; opacity: 0.5; } .notif-empty span { font-size: 0.9rem; } @media (max-width: 600px) { .nav-notif-dropdown { width: calc(100vw - 30px); right: -10px; } } /* ============================================================================ KARANLIK TEMA â€” html.cl-dark ============================================================================ */ html.cl-dark { --cl-blue: #3b82f6; --cl-blue-bright: #60a5fa; --cl-blue-dark: #2563eb; --cl-navy: #0a0f1c; --cl-ink: #f1f5f9; --cl-text: #cbd5e1; --cl-muted: #94a3b8; --cl-bg: #0f172a; --cl-bg-soft: #1e293b; --cl-card: #1a2436; --cl-border: #334155; --cl-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.6); --cl-shadow-soft: 0 10px 30px -16px rgba(0, 0, 0, 0.5); } html.cl-dark body { background: var(--cl-bg); color: var(--cl-text); } /* Genel arka plan / panel beyazlarÄ±nÄ± override et */ html.cl-dark .cl-card, html.cl-dark .cl-panel, html.cl-dark .product-card, html.cl-dark .cl-credit-card, html.cl-dark .cl-history, html.cl-dark .cl-lb-side, html.cl-dark .cl-lb-panel, html.cl-dark .cl-staff-card2, html.cl-dark .cl-legal-paper, html.cl-dark .cl-legal-nav, html.cl-dark .cl-staff-info .cl-si-hero, html.cl-dark .navbar, html.cl-dark .nav-profile-dropdown, html.cl-dark .nav-notif-dropdown { background: var(--cl-card) !important; color: var(--cl-text); border-color: var(--cl-border); } /* Form input'larÄ± */ html.cl-dark input, html.cl-dark select, html.cl-dark textarea, html.cl-dark .cl-form-input, html.cl-dark .edit-input { background: var(--cl-bg-soft) !important; color: var(--cl-text) !important; border-color: var(--cl-border) !important; } html.cl-dark input::placeholder, html.cl-dark textarea::placeholder { color: #64748b !important; } /* Tablo */ html.cl-dark table, html.cl-dark .admin-table, html.cl-dark .cl-table, html.cl-dark .cl-lb-table { background: var(--cl-card); color: var(--cl-text); } html.cl-dark .admin-table thead, html.cl-dark .cl-lb-table thead th, html.cl-dark .cl-table thead th { background: var(--cl-bg-soft) !important; color: var(--cl-text); border-color: var(--cl-border); } html.cl-dark .admin-table td, html.cl-dark .cl-table td, html.cl-dark .cl-lb-table tbody td { border-color: var(--cl-border); background: var(--cl-card); } html.cl-dark .cl-lb-table tbody td { background: var(--cl-bg-soft); } html.cl-dark .cl-lb-pill { background: var(--cl-card); color: var(--cl-ink); border-color: var(--cl-border); } /* Bildirim dropdown */ html.cl-dark .notif-item.unread { background: rgba(59,130,246,0.08); } html.cl-dark .notif-ico { background: var(--cl-bg-soft); } html.cl-dark .notif-empty { color: var(--cl-muted); } html.cl-dark .notif-head { background: var(--cl-bg-soft); border-color: var(--cl-border); } /* Tema toggle butonu */ .cl-theme-toggle { background: transparent; border: 0; cursor: pointer; padding: 8px 10px; color: var(--cl-ink, #16223d); font-size: 1.05rem; border-radius: 10px; transition: background .15s ease; } .cl-theme-toggle:hover { background: rgba(37,99,235,0.08); } html.cl-dark .cl-theme-toggle:hover { background: rgba(255,255,255,0.05); } /* Linkler */ html.cl-dark a:not(.cl-btn):not(.btn-icon):not(.nav-profile-trigger):not(.notif-item) { color: var(--cl-blue-bright); } /* Hero / dotgrid arka plan */ html.cl-dark .cl-dotgrid { background-color: var(--cl-bg); } /* Footer */ html.cl-dark .cl-footer { background: #0a1424 !important; border-color: var(--cl-border); color: var(--cl-text); } html.cl-dark .cl-footer-col h4, html.cl-dark .cl-footer-col a, html.cl-dark .cl-footer-bottom { color: var(--cl-text); } html.cl-dark .cl-footer-col a:hover { color: var(--cl-blue-bright); } /* Alert kutularÄ± */ html.cl-dark .cl-alert.success, html.cl-dark .admin-alert-success { background: rgba(34,197,94,.15) !important; color: #86efac !important; border-color: rgba(34,197,94,.3); } html.cl-dark .cl-alert.error, html.cl-dark .admin-alert-danger { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; border-color: rgba(239,68,68,.3); } /* Section background */ html.cl-dark .cl-section { background: transparent; } /* Hero dalga: koyu temada section/footer arka planÄ± koyu olduÄŸu iÃ§in dalga rengini deÄŸiÅŸtir */ html.cl-dark .cl-hero-v4-wave .cl-wave-back { fill: #1e293b; } html.cl-dark .cl-hero-v4-wave .cl-wave-mid { fill: #18233a; } html.cl-dark .cl-hero-v4-wave .cl-wave-front { fill: var(--cl-bg); } /* ============================================================================ NAVBAR DÄ°L SEÃ‡Ä°CÄ° (cl-nav-lang) ============================================================================ */ .nav-lang-wrapper { position: relative; } .cl-nav-lang { background: transparent; border: 0; cursor: pointer; padding: 8px 12px; color: var(--cl-ink, #16223d); font-size: 0.85rem; font-weight: 600; border-radius: 10px; transition: background .15s ease; display: inline-flex; align-items: center; gap: 6px; } .cl-nav-lang:hover { background: rgba(37,99,235,.08); } .cl-lang-flag { font-size: 1.05rem; line-height: 1; } .cl-lang-code { font-size: 0.78rem; letter-spacing: .04em; } .nav-lang-dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; background: #fff; border: 1px solid var(--cl-border, #e6ecf6); border-radius: 14px; box-shadow: 0 16px 50px -16px rgba(15,27,51,.25); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s ease; z-index: 100; overflow: hidden; padding: 6px; } .nav-lang-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .cl-lang-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--cl-ink, #0f1b33); font-size: 0.9rem; font-weight: 500; transition: background .15s ease; } .cl-lang-item:hover { background: var(--cl-bg-soft, #eef3fb); } .cl-lang-item.active { background: rgba(37,99,235,.08); color: var(--cl-blue, #2563eb); font-weight: 600; } .cl-lang-item i.fa-check { margin-left: auto; color: var(--cl-blue, #2563eb); font-size: 0.8rem; } .cl-lang-item .cl-lang-flag { font-size: 1.2rem; } /* ============================================================================ MAÄAZA SUNUCU TAB'LARI (cl-store-tabs) ============================================================================ */ .cl-theme .cl-store-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: var(--cl-card, #fff); border: 1px solid var(--cl-border, #e6ecf6); border-radius: 14px; margin-bottom: 18px; box-shadow: 0 4px 14px -8px rgba(15, 27, 51, .08); } .cl-theme .cl-store-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--cl-muted, #64748b); font-weight: 600; font-size: 0.88rem; background: var(--cl-bg-soft, #eef3fb); border: 1px solid transparent; transition: all .2s ease; } .cl-theme .cl-store-tab:hover { background: rgba(37, 99, 235, .08); color: var(--cl-blue, #2563eb); transform: translateY(-1px); } .cl-theme .cl-store-tab.active { background: var(--cl-blue, #2563eb); color: #fff; box-shadow: 0 6px 18px -6px rgba(37, 99, 235, .5); } .cl-theme .cl-store-tab .server-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .cl-theme .cl-store-tab .server-dot.online { background: #10b981; box-shadow: 0 0 6px #10b981; } .cl-theme .cl-store-tab .server-dot.offline { background: #94a3b8; } .cl-theme .cl-store-tab .tab-count { background: rgba(255, 255, 255, .25); color: #fff; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; margin-left: 4px; } .cl-theme .cl-store-tab:not(.active) .tab-count { background: rgba(37, 99, 235, .15); color: var(--cl-blue, #2563eb); } /* ============================================================================ GECE PAZARI — PREMIUM EDITION (cl-nm) ============================================================================ */ /* MAIN BACKGROUND — animasyonlu gece gökyüzü */ .cl-nm { padding: 30px 0 80px; background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, .25) 0%, transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(236, 72, 153, .15) 0%, transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(59, 130, 246, .15) 0%, transparent 50%), linear-gradient(180deg, #0a0a1a 0%, #0f0f2a 100%); min-height: 100vh; color: #fff; position: relative; overflow: hidden; } .cl-nm::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .6) 0.5px, transparent 1.5px), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .4) 0.5px, transparent 1.5px), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, .5) 0.5px, transparent 1.5px), radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .3) 0.5px, transparent 1.5px), radial-gradient(circle at 90% 40%, rgba(255, 255, 255, .4) 0.5px, transparent 1.5px), radial-gradient(circle at 10% 60%, rgba(255, 255, 255, .5) 0.5px, transparent 1.5px), radial-gradient(circle at 55% 45%, rgba(255, 255, 255, .3) 0.5px, transparent 1.5px); background-size: 400px 400px, 300px 300px, 500px 500px, 250px 250px, 350px 350px, 450px 450px, 200px 200px; animation: nm-stars-drift 60s linear infinite; pointer-events: none; z-index: 0; } @keyframes nm-stars-drift { 0% { transform: translate(0, 0); } 100% { transform: translate(-100px, -100px); } } .cl-nm-wrap { max-width: 1280px; position: relative; z-index: 1; } /* Breadcrumb dark theme */ .cl-nm .cl-breadcrumb { color: rgba(255, 255, 255, .6); } .cl-nm .cl-breadcrumb a { color: rgba(255, 255, 255, .7); } .cl-nm .cl-breadcrumb a:hover { color: #fff; } .cl-nm .cl-breadcrumb .active { color: #fff; } .cl-nm .cl-breadcrumb .sep { color: rgba(255, 255, 255, .3); } /* HERO */ .cl-nm-hero { text-align: center; padding: 64px 24px 50px; margin-top: 20px; background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, .3) 0%, transparent 70%), linear-gradient(135deg, rgba(76, 29, 149, .4) 0%, rgba(131, 24, 67, .4) 100%); border-radius: 28px; border: 1px solid rgba(167, 139, 250, .25); position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 80px -20px rgba(139, 92, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .12); } .cl-nm-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 90%, rgba(167, 139, 250, .35) 0%, transparent 50%), radial-gradient(circle at 75% 10%, rgba(244, 114, 182, .3) 0%, transparent 50%); pointer-events: none; } .cl-nm-hero::after { content: ""; position: absolute; top: -2px; left: -50%; width: 200%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: nm-hero-sweep 6s ease-in-out infinite; } @keyframes nm-hero-sweep { 0%, 100% { transform: translateX(-25%); opacity: 0; } 50% { transform: translateX(25%); opacity: 1; } } .cl-nm-hero > * { position: relative; z-index: 1; } .cl-nm-hero-ico { width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #ec4899); display: grid; place-items: center; font-size: 2.2rem; color: #fff; box-shadow: 0 20px 50px -10px rgba(167, 139, 250, .7), inset 0 -3px 8px rgba(0, 0, 0, .2), inset 0 3px 8px rgba(255, 255, 255, .3); animation: nm-icon-float 4s ease-in-out infinite; position: relative; } .cl-nm-hero-ico::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: linear-gradient(135deg, rgba(167, 139, 250, .4), rgba(236, 72, 153, .4)); z-index: -1; filter: blur(20px); animation: nm-icon-glow 3s ease-in-out infinite; } @keyframes nm-icon-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-5deg); } } @keyframes nm-icon-glow { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .cl-nm-hero h1 { font-family: 'Poppins', sans-serif; font-size: 3rem; font-weight: 900; margin: 0 0 14px; letter-spacing: 0.08em; color: #fff; text-shadow: 0 4px 30px rgba(167, 139, 250, .5); } .cl-nm-hero h1 .hl { background: linear-gradient(90deg, #c4b5fd 0%, #f0abfc 50%, #fda4af 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nm-text-shimmer 4s linear infinite; } @keyframes nm-text-shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } .cl-nm-hero p { color: rgba(255, 255, 255, .8); max-width: 580px; margin: 0 auto 22px; line-height: 1.7; font-size: 1rem; } .cl-nm-timer { display: inline-flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; color: rgba(255, 255, 255, .9); font-size: 0.95rem; backdrop-filter: blur(10px); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .4); } .cl-nm-timer i { color: #f472b6; animation: nm-timer-pulse 1.5s ease-in-out infinite; } .cl-nm-timer strong { color: #fff; letter-spacing: 0.05em; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.05rem; } @keyframes nm-timer-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.1); } } /* GRID */ .cl-nm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 44px; max-width: 1180px; margin-left: auto; margin-right: auto; perspective: 2000px; } /* KART CONTAINER */ .cl-nm-card { aspect-ratio: 3 / 4.4; cursor: pointer; position: relative; transform: translateY(0); transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .cl-nm-card:hover { transform: translateY(-6px); } /* Kartın ALTI — gölge ve parıltı */ .cl-nm-card::before { content: ""; position: absolute; inset: 10% 5% -10%; background: radial-gradient(ellipse at center, rgba(139, 92, 246, .5) 0%, transparent 70%); filter: blur(30px); z-index: -1; opacity: .6; transition: opacity .4s ease; } .cl-nm-card:hover::before { opacity: 1; } .cl-nm-card.revealed::before { background: radial-gradient(ellipse at center, rgba(236, 72, 153, .55) 0%, transparent 70%); } .cl-nm-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); } .cl-nm-card.revealed .cl-nm-card-inner { transform: rotateY(180deg) scale(1.02); } .cl-nm-card-back, .cl-nm-card-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; overflow: hidden; } /* ============ ARKA YÜZ — KAPALI KART ============ */ .cl-nm-card-back-form { width: 100%; height: 100%; margin: 0; } .cl-nm-back-btn { position: relative; width: 100%; height: 100%; border: 1px solid rgba(167, 139, 250, .25); background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, .35) 0%, transparent 70%), linear-gradient(135deg, #1e1b4b 0%, #4c1d95 40%, #831843 100%); cursor: pointer; overflow: hidden; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s ease; box-shadow: 0 25px 60px -15px rgba(139, 92, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .3); } .cl-nm-back-btn:hover { transform: scale(1.03) translateY(-2px); filter: brightness(1.15); } /* HOLOGRAFİK PARILTI — kartın üzerinde dönen ışık */ .cl-nm-back-btn::before { content: ""; position: absolute; inset: -50%; background: conic-gradient( from 0deg, transparent 0deg, rgba(167, 139, 250, .25) 60deg, rgba(236, 72, 153, .35) 120deg, rgba(251, 191, 36, .25) 180deg, rgba(167, 139, 250, .25) 240deg, transparent 360deg ); animation: nm-card-shine 8s linear infinite; pointer-events: none; } @keyframes nm-card-shine { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .cl-nm-back-pattern { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .08) 0%, transparent 25%), radial-gradient(circle at 80% 20%, rgba(236, 72, 153, .15) 0%, transparent 30%), repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 30deg, rgba(255, 255, 255, .03) 30deg, rgba(255, 255, 255, .03) 60deg); opacity: .7; pointer-events: none; } /* Köşelerdeki süslemeler — Valorant kart hissi */ .cl-nm-back-btn::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; pointer-events: none; } .cl-nm-back-mark { position: relative; width: 120px; height: 120px; border: 2px solid rgba(255, 255, 255, .3); border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, .95); background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, .35) 0%, transparent 70%); box-shadow: 0 0 40px rgba(167, 139, 250, .4), inset 0 0 30px rgba(255, 255, 255, .1); animation: nm-mark-pulse 3s ease-in-out infinite; } .cl-nm-back-mark::before { content: ""; position: absolute; inset: -8px; border: 1px dashed rgba(255, 255, 255, .15); border-radius: 50%; animation: nm-mark-spin 20s linear infinite; } @keyframes nm-mark-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(167, 139, 250, .4), inset 0 0 30px rgba(255, 255, 255, .1); } 50% { transform: scale(1.05); box-shadow: 0 0 60px rgba(236, 72, 153, .5), inset 0 0 40px rgba(255, 255, 255, .15); } } @keyframes nm-mark-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .cl-nm-back-mark i { position: absolute; top: 22px; font-size: 1.5rem; color: #fbbf24; filter: drop-shadow(0 0 8px rgba(251, 191, 36, .6)); } .cl-nm-back-mark span { font-family: 'Poppins', sans-serif; font-size: 3.8rem; font-weight: 900; color: #fff; line-height: 1; margin-top: 16px; text-shadow: 0 4px 20px rgba(167, 139, 250, .8); } .cl-nm-back-cta { position: relative; color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); animation: nm-cta-bounce 2s ease-in-out infinite; } @keyframes nm-cta-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ============ ÖN YÜZ — AÇIK KART ============ */ .cl-nm-card-front { transform: rotateY(180deg); background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(167, 139, 250, .2); display: flex; flex-direction: column; box-shadow: 0 30px 60px -15px rgba(167, 139, 250, .5), inset 0 1px 0 rgba(255, 255, 255, .9); } /* Ön yüzde holografik ışık çizgisi */ .cl-nm-card-front::before { content: ""; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); transition: left 1s ease; pointer-events: none; z-index: 2; } .cl-nm-card.revealed .cl-nm-card-front::before { left: 150%; transition: left 1.5s ease 0.6s; } .cl-nm-card-img { position: relative; aspect-ratio: 1.5 / 1; background: radial-gradient(circle at 50% 100%, rgba(167, 139, 250, .15) 0%, transparent 60%), linear-gradient(135deg, #f8fafc, #e2e8f0); display: grid; place-items: center; overflow: hidden; } .cl-nm-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .05) 100%); } .cl-nm-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .cl-nm-card:hover .cl-nm-card-img img { transform: scale(1.06); } .cl-nm-card-img > i { color: #cbd5e1; font-size: 2.8rem; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .1)); } /* İNDİRİM ROZETİ — Premium */ .cl-nm-discount-badge { position: absolute; top: 14px; right: 14px; background: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #be185d 100%); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 0.95rem; padding: 7px 14px; border-radius: 999px; box-shadow: 0 8px 22px -4px rgba(236, 72, 153, .65), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .2); z-index: 3; transform: scale(0); animation: nm-badge-pop .6s cubic-bezier(.2, 1.2, .3, 1) forwards .8s; } .cl-nm-card.revealed .cl-nm-discount-badge { animation: nm-badge-pop .6s cubic-bezier(.2, 1.2, .3, 1) forwards .8s; } @keyframes nm-badge-pop { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.15) rotate(10deg); } 100% { transform: scale(1) rotate(0); } } .cl-nm-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; position: relative; } /* Reveal sırasında içerik fade-in */ .cl-nm-card.revealed .cl-nm-card-cat, .cl-nm-card.revealed .cl-nm-card-title, .cl-nm-card.revealed .cl-nm-prices, .cl-nm-card.revealed .cl-nm-card-body form, .cl-nm-card.revealed .cl-nm-bought { animation: nm-content-fade .5s ease forwards; opacity: 0; } .cl-nm-card.revealed .cl-nm-card-cat { animation-delay: 1s; } .cl-nm-card.revealed .cl-nm-card-title { animation-delay: 1.15s; } .cl-nm-card.revealed .cl-nm-prices { animation-delay: 1.3s; } .cl-nm-card.revealed .cl-nm-card-body form, .cl-nm-card.revealed .cl-nm-bought { animation-delay: 1.45s; } @keyframes nm-content-fade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .cl-nm-card-cat { color: #8b5cf6; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .cl-nm-card-title { font-family: 'Poppins', sans-serif; font-size: 1.05rem; font-weight: 700; color: #0f1b33; margin: 0 0 14px; line-height: 1.3; } .cl-nm-prices { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; } .cl-nm-old { color: #94a3b8; text-decoration: line-through; font-size: 0.88rem; font-weight: 500; } .cl-nm-new { font-family: 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 900; background: linear-gradient(90deg, #ec4899, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sepete Ekle butonu */ .cl-nm-card-body .cl-btn-primary { background: linear-gradient(135deg, #8b5cf6, #ec4899); border: 0; color: #fff; box-shadow: 0 8px 20px -6px rgba(139, 92, 246, .5); transition: all .25s ease; } .cl-nm-card-body .cl-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -6px rgba(236, 72, 153, .55); filter: brightness(1.1); } .cl-nm-bought { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; cursor: default !important; border: 0 !important; box-shadow: 0 6px 16px -4px rgba(16, 185, 129, .4) !important; } .cl-nm-card.purchased .cl-nm-card-front { opacity: .88; filter: saturate(.85); } .cl-nm-card.purchased .cl-nm-card-img::before { content: "SATIN ALINDI"; position: absolute; inset: 0; background: rgba(16, 185, 129, .15); color: #047857; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 0.15em; display: grid; place-items: center; z-index: 2; text-shadow: 0 2px 6px rgba(255, 255, 255, .8); } /* Kapalı pazar durumu */ .cl-nm-closed { margin-top: 40px; padding: 70px 30px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, .15) 0%, transparent 70%), rgba(15, 23, 42, .6); border: 1px solid rgba(167, 139, 250, .2); border-radius: 26px; backdrop-filter: blur(20px); box-shadow: 0 20px 60px -15px rgba(139, 92, 246, .35); } .cl-nm-closed-icon { width: 90px; height: 90px; margin: 0 auto 22px; border-radius: 50%; background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .25); color: #a78bfa; display: grid; place-items: center; font-size: 2.4rem; } .cl-nm-closed h2 { font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: #fff; margin: 0 0 10px; } .cl-nm-closed p { color: rgba(255, 255, 255, .7); margin: 0 0 6px; } .cl-nm-closed-sub { font-style: italic; color: rgba(255, 255, 255, .5); } .cl-nm-foot { text-align: center; color: rgba(255, 255, 255, .55); font-size: 0.88rem; margin-top: 40px; padding: 18px; } .cl-nm-foot i { color: #a78bfa; margin-right: 6px; } /* Navbar rozeti */ .cl-theme .cl-nav-nm { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.85rem; box-shadow: 0 8px 22px -6px rgba(139, 92, 246, .55), inset 0 1px 0 rgba(255, 255, 255, .25); position: relative; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; overflow: hidden; } .cl-theme .cl-nav-nm::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); transform: translateX(-100%); animation: nm-nav-shine 3s ease-in-out infinite; } @keyframes nm-nav-shine { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .cl-theme .cl-nav-nm:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 28px -6px rgba(236, 72, 153, .65); filter: brightness(1.1); } .cl-theme .cl-nav-nm .cl-nav-nm-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: #fbbf24; border-radius: 50%; box-shadow: 0 0 8px #fbbf24; animation: nm-pulse 1.5s ease-in-out infinite; } @keyframes nm-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } } /* RESPONSIVE */ @media (max-width: 700px) { .cl-nm-hero { padding: 42px 20px 36px; } .cl-nm-hero h1 { font-size: 1.9rem; } .cl-nm-hero p { font-size: 0.92rem; } .cl-nm-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .cl-nm-back-mark { width: 80px; height: 80px; } .cl-nm-back-mark span { font-size: 2.4rem; } .cl-nm-back-mark i { top: 14px; font-size: 1.1rem; } .cl-nm-back-cta { font-size: 0.7rem; padding: 7px 14px; } .cl-nm-card-title { font-size: 0.95rem; } .cl-nm-new { font-size: 1.2rem; } .cl-theme .cl-nav-nm span { display: none; } } /* ============================================================================ KREDİ BOOST (2x etkinlik) ============================================================================ */ /* Banner — add-credit.php form üstü */ .cl-boost-banner { position: relative; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #dc2626 100%); border-radius: 18px; padding: 20px 24px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 15px 40px -10px rgba(245, 158, 11, .55); } .cl-boost-bg { position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.25) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.15) 0%, transparent 50%); pointer-events: none; } .cl-boost-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-100%); animation: cl-boost-shine 3s ease-in-out infinite; pointer-events: none; } @keyframes cl-boost-shine { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } .cl-boost-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cl-boost-mult { font-family: 'Poppins', sans-serif; font-size: 3.5rem; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,.3); letter-spacing: -0.02em; animation: cl-boost-pulse 1.5s ease-in-out infinite; } @keyframes cl-boost-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .cl-boost-info { flex: 1; min-width: 220px; } .cl-boost-title { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.15rem; text-shadow: 0 2px 8px rgba(0,0,0,.25); letter-spacing: 0.02em; } .cl-boost-desc { color: rgba(255, 255, 255, .92); font-size: 0.92rem; margin-top: 4px; } .cl-boost-desc strong { color: #fff; } .cl-boost-timer { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 0.88rem; } /* Quick-amount boost'lu */ .cl-quick-amount.has-boost { flex-direction: column; background: linear-gradient(135deg, rgba(251, 191, 36, .08), rgba(245, 158, 11, .05)); border: 1px solid rgba(251, 191, 36, .35); padding: 10px 16px; height: auto; gap: 2px; position: relative; } .cl-quick-amount.has-boost::before { content: "+BONUS"; position: absolute; top: -8px; right: -8px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; font-size: 0.6rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.05em; box-shadow: 0 4px 10px -2px rgba(245, 158, 11, .6); } .cl-quick-amount.has-boost .qa-amount { font-weight: 700; color: var(--cl-ink, #0f1b33); } .cl-quick-amount.has-boost .qa-credits { font-size: 0.72rem; color: #d97706; font-weight: 600; } .cl-quick-amount.has-boost:hover { background: linear-gradient(135deg, rgba(251, 191, 36, .18), rgba(245, 158, 11, .1)); border-color: rgba(251, 191, 36, .6); transform: translateY(-2px); } /* Boost preview */ .cl-boost-preview { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(251, 191, 36, .12), rgba(245, 158, 11, .06)); border: 1px solid rgba(251, 191, 36, .35); color: var(--cl-ink, #0f1b33); padding: 12px 16px; border-radius: 12px; margin-top: 12px; font-size: 0.92rem; } /* Duyuru çubuğu — credit boost varyantı */ .cl-announce-credit-boost { background: linear-gradient(90deg, #fbbf24 0%, #f97316 35%, #dc2626 70%, #fbbf24 100%); background-size: 200% 100%; animation: cl-cb-flow 5s linear infinite; color: #fff; } @keyframes cl-cb-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @media (max-width: 600px) { .cl-boost-mult { font-size: 2.5rem; } .cl-boost-banner { padding: 16px; } }