/* ========================================================================== PinHesap — Oyun Epin Teması Tüm görsel kurallar bu dosyada. index.html içinde inline `style` yok. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tasarım tokenları -------------------------------------------------------------------------- */ /* GECE MODU (varsayılan) Tema `` ile değişir; seçim yoksa işletim sistemi tercihi uygulanır (aşağıdaki prefers-color-scheme). --white kasıtlı olarak her iki temada da beyazdır: marka karolarının zeminidir. En parlak METİN rengi --text-strong'dur. */ :root { color-scheme: dark; /* Yüzeyler */ --bg: #000; --bg-elev: #0A0A0B; --surface: #0C0C10; --surface-2: #0D0D10; --surface-3: #101014; --surface-4: #111114; --surface-5: #141417; /* Çizgiler */ --line: #18181B; --line-card: #1A1A1E; --line-soft: #1F1F24; --line-mid: #26262B; --line-strong: #2E2E36; /* Metin */ --text: #F2F2F4; --text-strong: #FFFFFF; --text-2: #D6D4DE; --text-3: #B9B6C4; --muted: #A3A0AE; --muted-2: #9A97A6; --icon-muted: #8E8B99; --price-old: #8A879A; --white: #fff; /* karo zemini — temaya göre değişmez */ /* Vurgu */ --accent: #8C9EFF; --accent-2: #B49DFF; --accent-3: #C0AEFF; --accent-soft: #A8B4FF; --accent-hover: #C3CBFF; --on-accent: #0B0B12; --grad-accent: linear-gradient(135deg, #8C9EFF, #B49DFF); /* Durum — form geri bildirimi */ --ok: #3FD08A; --mb-live-ink: #5FE0A0; --danger: #FF6B7A; --warn: #FFC46B; /* Yüzey efektleri */ --glass-bg: rgba(255, 255, 255, .1); --glass-line: rgba(255, 255, 255, .22); --overlay-bg: rgba(16, 16, 20, .82); --scrim: rgba(0, 0, 0, .6); --scrollbar: #232323; --dot: #4A4A54; --divider-soft: #3A3A42; /* Tipografi */ --font: 'Plus Jakarta Sans', system-ui, sans-serif; /* Bölümlerin iç boşluğu — tüm bölümler bunu kullanır. Şeritler (üst bar, header, nav, footer) tam genişlikte kalır, sadece içerikleri bu kadar içeri kayar. 9vw orta genisliklerde ekranin ~%18'ini yiyordu; calc ile kenar boslugu ~1000px'e kadar olculu kalir, genis ekranda acilir. */ --gutter: clamp(20px, calc(14vw - 80px), 200px); } /* -------------------------------------------------------------------------- GÜNDÜZ MODU Yalnızca renk tokenları yeniden tanımlanır; hiçbir kural tekrarlanmaz. Vurgu rengi koyulaştırıldı: #8C9EFF beyaz üzerinde kontrast sağlamıyor. -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #F4F5FA; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F8FC; --surface-3: #F1F2F8; --surface-4: #F1F2F8; --surface-5: #E9EAF2; --line: #E5E6EE; --line-card: #E5E6EE; --line-soft: #DCDEE8; --line-mid: #D3D5E1; --line-strong: #C8CAD8; --text: #15151C; --text-strong: #0B0B12; --text-2: #33333F; --text-3: #4E4E5C; --muted: #6B6B79; --muted-2: #7C7C8A; --icon-muted: #85858F; --price-old: #8A8A96; --accent: #5566E8; --accent-2: #8A6BE0; --accent-3: #7E5BD6; --accent-soft: #4A5CDC; --accent-hover: #3B4CC6; --on-accent: #FFFFFF; --grad-accent: linear-gradient(135deg, #5566E8, #8A6BE0); /* Beyaz zeminde okunurluk için koyulaştırıldı */ --ok: #128A55; --mb-live-ink: #0B7A4C; --danger: #C62B45; --warn: #9A6206; --glass-bg: rgba(0, 0, 0, .05); --glass-line: rgba(0, 0, 0, .12); --overlay-bg: rgba(255, 255, 255, .88); --scrim: rgba(20, 20, 30, .45); --scrollbar: #C9CAD4; --dot: #C2C3CF; --divider-soft: #D3D5E1; } /* Kullanıcı seçim yapmadıysa işletim sistemi tercihini uygula */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #F4F5FA; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-2: #F7F8FC; --surface-3: #F1F2F8; --surface-4: #F1F2F8; --surface-5: #E9EAF2; --line: #E5E6EE; --line-card: #E5E6EE; --line-soft: #DCDEE8; --line-mid: #D3D5E1; --line-strong: #C8CAD8; --text: #15151C; --text-strong: #0B0B12; --text-2: #33333F; --text-3: #4E4E5C; --muted: #6B6B79; --muted-2: #7C7C8A; --icon-muted: #85858F; --price-old: #8A8A96; --accent: #5566E8; --accent-2: #8A6BE0; --accent-3: #7E5BD6; --accent-soft: #4A5CDC; --accent-hover: #3B4CC6; --on-accent: #FFFFFF; --grad-accent: linear-gradient(135deg, #5566E8, #8A6BE0); --ok: #128A55; --mb-live-ink: #0B7A4C; --danger: #C62B45; --warn: #9A6206; --glass-bg: rgba(0, 0, 0, .05); --glass-line: rgba(0, 0, 0, .12); --overlay-bg: rgba(255, 255, 255, .88); --scrim: rgba(20, 20, 30, .45); --scrollbar: #C9CAD4; --dot: #C2C3CF; --divider-soft: #D3D5E1; } } /* -------------------------------------------------------------------------- 2. Temel / reset -------------------------------------------------------------------------- */ body { margin: 0; background: var(--bg); font-family: var(--font); -webkit-font-smoothing: antialiased; } a { color: var(--accent-soft); text-decoration: none; } a:hover { color: var(--accent); } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; } /* `hidden` ozniteligi her zaman kazansin. Yazar CSS'indeki bir `display` kurali tarayicinin [hidden] kuralini ezip gizli bir katmanin ekrani kaplamasina yol acabiliyor. */ [hidden] { display: none !important; } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* -------------------------------------------------------------------------- 3. Sayfa iskeleti -------------------------------------------------------------------------- */ .page { min-height: 100vh; background: var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: center; } .page-inner { width: 100%; overflow: hidden; background: var(--bg); } /* -------------------------------------------------------------------------- 4. Ortak parçalar — logo karoları, renk tonları, avatarlar -------------------------------------------------------------------------- */ /* Beyaz zeminli, kısaltma taşıyan marka karosu. Boyut modifier'ı zorunlu. */ .logo-tile { background: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; } .logo-tile--sm { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; font-size: 12.5px; } /* Marka kısaltmalarının mürekkep renkleri. Aynı renk birden çok markada kullanıldığı için isimler markaya değil renge göre verildi. */ .ink-crimson { color: #E0405A; } .ink-red { color: #C2302A; } .ink-rust { color: #C2452A; } .ink-orange { color: #E06A2C; } .ink-amber { color: #D79A16; } .ink-gold { color: #D0902A; } .ink-olive { color: #4E7A12; } .ink-lime { color: #3E7A16; } .ink-green { color: #1E8A46; } .ink-emerald { color: #2F9A6A; } .ink-jade { color: #1D9A5C; } .ink-teal { color: #1C7A86; } .ink-azure { color: #1E6EA8; } .ink-steel { color: #2A6BA8; } .ink-sapphire { color: #2B6AC8; } .ink-blue { color: #2B57C4; } .ink-indigo { color: #1B4FC4; } .ink-cobalt { color: #3A6ED0; } .ink-navy { color: #16344F; } .ink-violet { color: #6B46C8; } .ink-purple { color: #7E4AD0; } .ink-magenta { color: #A8307A; } .ink-slate { color: #3A3A44; } /* Karo içindeki placeholder ikon, karo boyutuna göre ölçeklenir. Rengini currentColor üzerinden üstündeki .ink-* sınıfından alır — tek SVG, 23 renk. Gerçek logolar geldiğinde yerine koymak yeterli. */ .logo-tile .icon { width: 56%; height: 56%; } /* Hero'daki avatar yığınında biraz daha küçük dursun */ .avatar .icon { width: 46%; height: 46%; } /* Hero'daki üst üste binen kullanıcı avatarları (.ink-* ile renklenir) */ .avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--white); border: 3px solid var(--bg); margin-right: -12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } /* Yardımcılar */ .accent { color: var(--accent-soft); } .min-w-0 { min-width: 0; } /* Görünmez ama ekran okuyucuya açık metin */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Tema geçişi Sınıf yalnızca düğmeye basıldığı anda eklenir ve ~0.4s sonra kaldırılır (assets/js/theme.js). Kalıcı olsaydı her hover ve her yeniden boyama gereksiz yere geçiş yapardı; sayfa açılışında da renkler kayardı. */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color .18s ease, background-image .18s ease, border-color .18s ease, color .18s ease, fill .18s ease !important; } /* NOT: burada prefers-reduced-motion ile kapatma YOK. O tercih hareket (kayma, buyume, parallaks) icindir; renk gecisi hareket degildir ve kapatilirsa tema aniden zipliyor. Hareketli efektler (kart kalkmasi, slider) ayrica kisitlaniyor. */ /* Tema düğmesi: hangi simge/etiketin görüneceğini CSS belirler, JS yalnızca data-theme değerini değiştirir. */ .theme-on-light { display: none; } :root[data-theme="light"] .theme-on-dark { display: none; } :root[data-theme="light"] .theme-on-light { display: inline-block; } /* Beyaz karolar gündüz modunda beyaz yüzeyin üstünde kayboluyor; ince bir çerçeve sınırlarını geri veriyor. */ :root[data-theme="light"] .logo-tile, :root[data-theme="light"] .review__avatar, :root[data-theme="light"] .brand__mark, :root[data-theme="light"] .promo__mark, :root[data-theme="light"] .footer-brand__mark, :root[data-theme="light"] .hero__badge-mark { border: 1px solid var(--line-soft); } /* -------------------------------------------------------------------------- 4b. Etkileşim dili Ürün kartındaki hareket temel alındı ve öğenin işine göre uyarlandı: kart -> yukarı kalkar (-3px) + vurgu çerçeve düğme -> hafif kalkar (-1px) + vurgu çerçeve satır -> sağa kayar (+3px) metin -> yalnızca renk geçişi Yalnızca gerçekten tıklanabilir öğelere uygulanır; bilgi kartlarına (.trust, .review) hover verilmedi, yanıltıcı olurdu. -------------------------------------------------------------------------- */ /* Renk geçişi olan her şey */ a, .chip, .icon-btn, .account, .mainnav__item, .mainnav__link, .theme-toggle, .navtoggle, .rail-item, .drawer__close, .drawer-tab, .faq__head, .btn-primary, .btn-ghost, .btn-glass, .btn-cart, .catcard { transition: color .2s, background-color .2s, border-color .2s, transform .2s; } /* --- Kartlar: ürün kartıyla aynı hareket --- */ .catcard:hover { transform: translateY(-3px); border-color: var(--accent); } /* --- Düğmeler --- */ .chip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); } .chip--active:hover { color: var(--on-accent); } .icon-btn:hover, .account:hover, .theme-toggle:hover, .navtoggle:hover, .drawer__close:hover, .drawer-tab:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); } /* Degrade butonlarda çerçeve yok; hafifçe parlayıp kalkıyorlar */ .btn-primary, .btn-cart { transition: transform .2s, filter .2s; } .btn-primary:hover, .btn-cart:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn-ghost:hover, .btn-glass:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); } /* --- Menü öğeleri: yalnızca renk --- */ .mainnav__item:hover, .mainnav__link:hover { color: var(--accent); } /* --- Liste satırı: sağa kayar --- */ .drawer-row { transition: background-color .2s, border-color .2s, transform .2s; } .drawer-row:hover { transform: translateX(3px); } .rail-item:hover .rail-item__tile { border-color: var(--accent); } /* --- Açılır başlıklar --- */ .faq__head:hover .faq__q { color: var(--accent); } /* -------------------------------------------------------------------------- 5. Butonlar -------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 16px; background: var(--grad-accent); color: var(--on-accent); font-size: 14.5px; font-weight: 800; cursor: pointer; } .btn-ghost { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); font-size: 13px; font-weight: 700; color: var(--text-2); } .btn-glass { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-line); backdrop-filter: blur(8px); font-size: 15.5px; font-weight: 700; color: var(--text-strong); cursor: pointer; } .btn-cart { height: 44px; border-radius: 14px; border: 0; background: var(--grad-accent); color: var(--on-accent); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } /* -------------------------------------------------------------------------- 6. Üst duyuru çubuğu -------------------------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px var(--gutter); background: var(--bg-elev); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .topbar__promo { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-3); flex-wrap: wrap; min-width: 0; } /* Duyuruya bağlantı verilmişse tüm şerit tıklanır */ a.topbar__promo--link { text-decoration: none; } a.topbar__promo--link:hover { color: var(--text-2); } a.topbar__promo--link:hover .topbar__arrow { border-color: var(--accent-2); color: var(--accent-2); } .topbar__icon { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-5); display: flex; align-items: center; justify-content: center; color: var(--accent-2); /* içindeki ikonun rengi */ } .topbar__strong { font-weight: 700; color: var(--text-strong); } .topbar__badge { padding: 3px 9px; border-radius: 999px; background: rgba(150, 160, 255, .14); border: 1px solid rgba(150, 160, 255, .3); font-size: 12px; font-weight: 700; color: var(--accent-soft); } .topbar__arrow { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line-mid); display: flex; align-items: center; justify-content: center; color: var(--text-3); } .topbar__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .theme-toggle { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; color: var(--text-2); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft); background: transparent; cursor: pointer; } /* -------------------------------------------------------------------------- 7. Site başlığı — logo, arama, aksiyonlar -------------------------------------------------------------------------- */ .site-header { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 26px); padding: 16px var(--gutter); background: var(--bg); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .brand__mark { flex: 0 0 auto; /* dar ekranda marka daralırken kare ezilmesin */ width: 44px; height: 44px; border-radius: 14px; background: var(--white); display: flex; align-items: center; justify-content: center; } .brand__mark-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-accent); } .brand__name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); } /* Bosluğu arama kutusu yutar; aksiyonlar icerik genisliginde kalir. flex-grow aksiyonlarda da olsaydi arama sisip onlari alt satira itiyordu. */ /* --- Arama: kutu + canlı öneri paneli --- .search-wrap konumlandırma kabuğu; panel ona göre açılır. Mobilde aynı kabuk .is-full ile tam ekrana geçer (bkz. 20. bölüm). */ .search-wrap { position: relative; flex: 1 1 200px; min-width: 0; z-index: 60; } .search { display: flex; align-items: center; gap: 10px; background: var(--surface-4); border: 1px solid var(--line-soft); border-radius: 999px; height: 52px; padding: 0 8px 0 20px; transition: border-color .2s, background-color .2s; } .search:focus-within { border-color: var(--accent); background: var(--bg-elev); } .search__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; } /* Tarayıcının kendi "x" düğmesi: kendi düğmemiz var */ .search__input::-webkit-search-cancel-button { display: none; } .search__input::placeholder { color: var(--muted-2); } .search .icon { color: var(--icon-muted); } .search__clear, .search__go, .search__close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; transition: background-color .2s, color .2s, filter .2s; } .search__clear:hover { background: var(--surface-5); color: var(--text); } .search__go { background: var(--grad-accent); color: var(--on-accent); } .search__go .icon { color: currentColor; } .search__go:hover { filter: brightness(1.1); } /* Tam ekran arama kapatma düğmesi: yalnızca mobilde görünür */ .search__close { display: none; } /* Mobil büyüteç düğmesi: masaüstünde arama kutusu zaten açık, gizli durur. İki sınıf: aşağıdaki .icon-btn kuralı display:flex veriyor, onu ezmeli. */ .icon-btn.search-open { display: none; } /* --- Öneri paneli --- */ .searchpanel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); animation: searchpanel-in .16s ease-out; } @keyframes searchpanel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .searchpanel__group + .searchpanel__group { margin-top: 6px; } .searchpanel__label { display: flex; align-items: center; gap: 6px; padding: 8px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .searchrow { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; color: var(--text); text-decoration: none; } .searchrow:hover, .searchrow.is-active, .searchpanel__all.is-active { background: var(--surface-4); } .searchrow.is-muted { opacity: .55; } .searchrow__img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--surface-5); display: flex; align-items: center; justify-content: center; color: var(--icon-muted); } .searchrow__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .searchrow__text { flex: 1 1 auto; min-width: 0; } .searchrow__name { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .searchrow__hit { background: transparent; color: var(--accent); font-weight: 800; } .searchrow__sub { display: block; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .searchrow__go { color: var(--text-3); } .searchpanel__all { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; padding: 12px; border-top: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; } .searchpanel__wait, .searchpanel__empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px; color: var(--text-3); font-size: 13.5px; } .searchpanel__empty { flex-direction: column; gap: 4px; text-align: center; } .searchpanel__empty .icon { color: var(--icon-muted); } .searchpanel__emptytitle { font-size: 14.5px; font-weight: 700; color: var(--text-2); } .searchpanel__emptysub { font-size: 13px; color: var(--text-3); } .searchspin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-mid); border-top-color: var(--accent); animation: searchspin 700ms linear infinite; } @keyframes searchspin { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .searchpanel { animation: none; } .searchspin { animation-duration: 2s; } } .header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; } /* Bazı varyantlar , bazıları