/* ZÜMRÜT KUYUMCULUK — "Canlı Piyasalar" teması (Claude Designer uyarlaması). Açık tema tasarımın birebir paleti; koyu tema aynı dilden türetildi. Tema ile CSS değişkenlerinden yönetilir. */ :root, [data-theme="light"] { --zemin: #F5F6F9; --zemin-2: #EDEFF4; --kart: #FFFFFF; --kart-solid: #FFFFFF; --kart-baslik: #14161D; /* kart üstündeki koyu mürekkep bandı */ --kart-baslik-metin: #F4F6FB; --cizgi: rgba(17, 19, 26, 0.09); --cizgi-ic: rgba(17, 19, 26, 0.07); --cizgi-koyu: rgba(17, 19, 26, 0.17); --metin: #11131A; --metin-2: #4B5160; --metin-soluk: #767D8E; --metin-silik: #A7ADBC; --marka: #11131A; --zumrut: #C99211; /* marka vurgusu: altın (eski değişken adı korunmuştur) */ --zumrut-derin: #B07A3C; --zumrut-zemin: rgba(201, 146, 17, 0.14); --altin: #C99211; --artis: #12A150; --dusus: #E0444E; --artis-zemin: rgba(18, 161, 80, 0.11); --dusus-zemin: rgba(224, 68, 78, 0.10); --satir-flash-artis: rgba(18, 161, 80, 0.14); --satir-flash-dusus: rgba(224, 68, 78, 0.12); --hover: #F2F4F8; --ustbar-zemin: rgba(255, 255, 255, 0.94); --golge: 0 1px 2px rgba(17, 19, 26, 0.06); --canli: #12A150; --canli-zemin: rgba(18, 161, 80, 0.11); } [data-theme="dark"] { --zemin: #0E1013; --zemin-2: #1D212A; --kart: #171A21; --kart-solid: #171A21; --kart-baslik: #14161D; --kart-baslik-metin: #F4F6FB; --cizgi: rgba(244, 246, 251, 0.09); --cizgi-ic: rgba(244, 246, 251, 0.06); --cizgi-koyu: rgba(244, 246, 251, 0.18); --metin: #F4F6FB; --metin-2: #B6BCC9; --metin-soluk: #8A91A0; --metin-silik: #646B7A; --marka: #F4F6FB; --zumrut: #D9A82D; --zumrut-derin: #C99211; --zumrut-zemin: rgba(217, 168, 45, 0.13); --altin: #D9A82D; --artis: #2FBF7F; --dusus: #E85D66; --artis-zemin: rgba(47, 191, 127, 0.13); --dusus-zemin: rgba(232, 93, 102, 0.12); --satir-flash-artis: rgba(47, 191, 127, 0.16); --satir-flash-dusus: rgba(232, 93, 102, 0.14); --hover: #1D212A; --ustbar-zemin: rgba(14, 16, 19, 0.92); --golge: 0 1px 2px rgba(0, 0, 0, 0.35); --canli: #2FBF7F; --canli-zemin: rgba(47, 191, 127, 0.12); } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--zemin); color: var(--metin); min-height: 100vh; line-height: 1.5; } .mono { font-family: "JetBrains Mono", ui-monospace, monospace; } .sarmal { max-width: 1180px; margin: 0 auto; padding: 0 20px; } @keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes yukari { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Duyuru şeridi ── */ .duyuru { background: var(--zumrut-zemin); border-bottom: 1px solid var(--cizgi); color: var(--metin); font-size: 13px; text-align: center; padding: 8px 16px; } .duyuru strong { color: var(--zumrut); font-weight: 700; letter-spacing: 0.02em; } /* ── Yapışkan üst bar ── */ .ustbar { position: sticky; top: 0; z-index: 50; background: var(--ustbar-zemin); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); } .ustbar-ic { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; } .logo { display: flex; align-items: center; text-decoration: none; } .logo img { height: 58px; width: auto; display: block; } [data-theme="light"] .logo .logo-acik-img { display: block; } [data-theme="light"] .logo .logo-koyu-img { display: none; } [data-theme="dark"] .logo .logo-acik-img { display: none; } [data-theme="dark"] .logo .logo-koyu-img { display: block; } .ust-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .nav-hap { white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--metin-2); text-decoration: none; padding: 9px 18px; border-radius: 999px; transition: color 0.13s ease, background 0.13s ease; } .nav-hap:hover { color: var(--zumrut); background: var(--hover); } .nav-hap.aktif { color: var(--zumrut); background: var(--zumrut-zemin); } .ust-araclar { display: flex; align-items: center; gap: 12px; } .saat { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--metin-2); } .tema-dugme { background: none; border: 1px solid var(--cizgi-koyu); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; color: var(--metin-2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: border-color 0.15s ease, color 0.15s ease; } .tema-dugme:hover { border-color: var(--zumrut); color: var(--zumrut); } [data-theme="dark"] .tema-ikon-ay { display: none; } [data-theme="light"] .tema-ikon-gunes { display: none; } /* ── Ana içerik ── */ .icerik { padding-top: 28px; padding-bottom: 40px; animation: yukari 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .sayfa-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .sayfa-baslik h1 { font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: var(--metin); } .sayfa-baslik p { margin-top: 6px; font-size: 13.5px; color: var(--metin-soluk); } .guncelleme { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 11px; color: var(--metin-2); background: var(--zemin-2); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } .guncelleme.gecikmeli { color: var(--zumrut); background: var(--zumrut-zemin); } /* ── Kategori kartları (en fazla 2 kolon) ── */ .gruplar { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grup { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); overflow: hidden; align-self: start; } .grup-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px; background: var(--kart-baslik); } .grup-baslik h2 { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--kart-baslik-metin); flex: 1; } [data-theme="dark"] .grup-baslik { box-shadow: inset 0 -1px 0 rgba(217, 168, 45, 0.4); } .kolon-baslik { display: grid; grid-template-columns: 1.3fr 1fr 1fr 92px; gap: 8px; padding: 8px 20px; background: var(--zemin); border-top: 1px solid var(--cizgi); } .kolon-baslik span { font-weight: 600; font-size: 10px; letter-spacing: 0.08em; color: var(--metin-soluk); text-align: right; } .kolon-baslik span:first-child { text-align: left; } .satir { display: grid; grid-template-columns: 1.3fr 1fr 1fr 92px; gap: 8px; align-items: center; padding: 10px 20px; min-height: 44px; border-top: 1px solid var(--cizgi-ic); background: transparent; transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .satir:hover { background: var(--hover); } .satir.flash-artis { background: var(--satir-flash-artis); } .satir.flash-dusus { background: var(--satir-flash-dusus); } .urun-hucre { min-width: 0; } .urun-ad { font-weight: 600; font-size: 13.5px; color: var(--metin); letter-spacing: -0.01em; } .urun-alt { font-weight: 500; font-size: 10px; color: var(--metin-silik); margin-top: 1px; letter-spacing: 0.05em; text-transform: uppercase; } .fiyat { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-size: 15px; } .fiyat.alis { font-weight: 500; color: var(--metin-2); } .fiyat.satis { font-weight: 600; color: var(--metin); } .fark-hucre { display: flex; justify-content: flex-end; } .fark { display: inline-flex; align-items: center; gap: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .fark .ok { font-size: 7.5px; } .fark.artis { color: var(--artis); background: var(--artis-zemin); } .fark.dusus { color: var(--dusus); background: var(--dusus-zemin); } .fark.notr { color: var(--metin-soluk); background: var(--zemin-2); } /* ── Grafik kartı ── */ .grafik-kart { grid-column: 1 / -1; } .grafik-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px 6px; } .grafik-etiket { font-weight: 600; font-size: 10px; letter-spacing: 0.08em; color: var(--metin-soluk); } .grafik-deger-satir { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .grafik-deger { font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--metin); } .grafik-sekmeler { display: flex; gap: 2px; background: var(--zemin-2); padding: 3px; border-radius: 8px; } .grafik-sekme { appearance: none; border: 0; cursor: pointer; padding: 7px 14px; border-radius: 6px; font-family: inherit; font-weight: 600; font-size: 12px; background: transparent; color: var(--metin-soluk); transition: all 0.13s cubic-bezier(0.22, 1, 0.36, 1); } .grafik-sekme.aktif { background: var(--kart); color: var(--metin); box-shadow: 0 1px 2px rgba(17, 19, 26, 0.10); } .grafik-govde { position: relative; padding: 12px 20px 4px; } .grafik-govde svg { display: block; width: 100%; height: 240px; } .grafik-y { position: absolute; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10px; color: var(--metin-silik); background: var(--kart); opacity: 0.92; padding: 1px 5px; border-radius: 4px; } .grafik-y.ust { top: 8px; left: 24px; } .grafik-y.alt { bottom: 30px; left: 24px; } .grafik-x { display: flex; justify-content: space-between; padding: 0 20px 14px; } .grafik-x span { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10px; color: var(--metin-silik); } .grafik-bos { padding: 34px 20px 38px; text-align: center; font-size: 13px; color: var(--metin-soluk); } /* ── Boş durum ── */ .bos-durum { text-align: center; padding: 70px 20px; color: var(--metin-soluk); font-size: 14.5px; } /* ── Alt bilgi ── */ .altbilgi { border-top: 1px solid var(--cizgi); background: var(--kart); } .altbilgi-ic { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 58px; /* sabit bilgi hapı footer içeriğini örtmesin */ } .altbilgi-marka { display: flex; align-items: center; gap: 16px; } .altbilgi-marka img { height: 34px; width: auto; display: block; opacity: 0.85; } [data-theme="light"] .altbilgi .logo-koyu-img { display: none; } [data-theme="dark"] .altbilgi .logo-acik-img { display: none; } .altbilgi-firma { white-space: nowrap; font-weight: 600; font-size: 12.5px; color: var(--metin); } .altbilgi-slogan { font-size: 11.5px; color: var(--metin-soluk); } .altbilgi-iletisim { font-size: 12.5px; color: var(--metin-soluk); text-align: right; } .altbilgi-iletisim a { color: var(--metin-2); text-decoration: none; font-weight: 600; } .altbilgi-iletisim a:hover { color: var(--zumrut); } .est-rozet { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; color: var(--metin-soluk); border: 1px solid var(--cizgi-koyu); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } /* ── Sabit bilgi hapı ── */ .bilgi-hapi { position: fixed; right: 16px; bottom: 16px; z-index: 60; pointer-events: none; background: rgba(20, 22, 29, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #F4F6FB; font-weight: 500; font-size: 11px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(17, 19, 26, 0.18); } /* ── Mobil ── */ @media (max-width: 860px) { .gruplar { grid-template-columns: 1fr; } .logo img { height: 42px; } .ustbar-ic { padding-top: 14px; padding-bottom: 14px; } .ust-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .ust-nav::-webkit-scrollbar { display: none; } .kolon-baslik, .satir { grid-template-columns: 1.2fr 0.9fr 0.9fr 74px; gap: 6px; padding-left: 14px; padding-right: 14px; } .fiyat { font-size: 13.5px; } .urun-ad { font-size: 12.5px; } .fark { font-size: 9.5px; padding: 3px 6px; } .sayfa-baslik h1 { font-size: 23px; } .grafik-deger { font-size: 22px; } .altbilgi-iletisim { text-align: left; } .bilgi-hapi { right: 10px; bottom: 10px; font-size: 10px; } }