/* ========================================================================== Super Viga — tek stil dosyası ========================================================================== Derleme adımı yok: bu dosya sunucuya olduğu gibi gider. TEMA ---- Site KOYU açılır. Bu bir tercih değil, marka kimliği — yetişkin ürün satan bir mağazada koyu zemin hem göz yormaz hem de vitrin fotoğraflarını öne çıkarır. Ziyaretçi isterse üst menüden açık temaya geçer; seçim localStorage'da saklanır ve olarak uygulanır. :root → KOYU (varsayılan) :root[data-theme="light"] → AÇIK (kullanıcı seçtiyse) Yeni renk eklerken İKİ bloğu da güncelle. Sabit renk kodu yazma; her zaman var(--token) kullan — yoksa tema değişince o parça bozuk kalır. ROL AYRIMI (karıştırması kolay, dikkat) --text metin rengi — koyuda açık, açıkta koyu (TERS DÖNER) --bg sayfa zemini — koyuda koyu, açıkta açık (TERS DÖNER) --deep her iki temada da KOYU kalan yüzey (alt bilgi, duyuru şeridi) --on-deep --deep üstündeki metin — her iki temada da açık --accent vurgu (altın) — her iki temada da benzer, tonu ayarlanır ========================================================================== */ /* ----------------------------------------------------------------- FONTLAR */ /* İKİ AİLE, NET GÖREV AYRIMI -------------------------- Plus Jakarta Sans → başlıklar. Geometrik, geniş omuzlu, 800'e kadar çıkan değişken ağırlık. Büyük puntoda "cılız" görünmez. Inter → gövde metni. Küçük puntoda en okunaklı seçeneklerden. Önceki kurulumda başlıklar Instrument Serif 400 idi: tek ve ince bir ağırlık. İnce serif küçük boyutta zarif durur ama 48px'lik bir başlıkta zayıf kalır ve sayfayı "hazır şablon" hissine iter. Premium algı ince harften değil, AĞIRLIK SIÇRAMASINDAN gelir: kalın başlık + normal gövde + sıkı harf aralığı. Her ikisi de kendi sunucumuzda barındırılır. CDN yok. */ @font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/plus-jakarta-latin-wght.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF; } /* Alternatif başlık aileleri — önizlemedeki tipografi seçicisi bunları dener. Biri kalıcı seçilince diğerlerinin @font-face bloğu silinebilir. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/manrope-latin-wght.woff2') format('woff2-variations'); } @font-face { font-family: 'InstrumentSans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/instrument-latin-wght.woff2') format('woff2-variations'); } /* ------------------------------------------------------------- TOKEN: KOYU */ :root { /* Zeminler — nötr kömür, hafif sıcak. Saf siyah (#000) kullanılmıyor: OLED'de keskin, fotoğraf kenarlarında "kesik" görünüyor. */ --bg: #0c0c0e; --surface: #141418; --surface-2: #1c1c22; --surface-3: #24242c; --line: #2c2c35; --line-soft: #212129; /* Metin */ --text: #f1efea; --text-2: #b8b5ae; --muted: #85828c; /* Vurgu — KOYU ALTIN. Önceki ton (#d9b779) şampanyaydı: doygunluğu düşük olduğu için koyu zeminde yeşile kaçık ve soluk okunuyordu. Bu ton daha doygun ve daha koyu — siyah üstünde gerçek metal altın gibi durur. Kontrast: #0c0c0e zemininde 7.9:1 (WCAG AAA). Kırmızı bilinçli olarak kullanılmadı: bu kategoride kırmızı hızla "ucuz seks shop" hissi veriyor. */ --accent: #c9a227; /* koyu altın */ --accent-2: #e2bc4b; /* üstüne gelince parlar */ --accent-dim: rgba(201, 162, 39, .15); --on-accent: #15120a; /* Ürün fotoğrafı zemini — İKİ temada da AÇIK kalır. Rol ayrımı: --surface tema ile ters döner, --product-bg dönmez. ⚠️ SAF BEYAZ OLMALI. Tedarikçi fotoğrafları beyaz fonda çekiliyor; buraya krem bir ton koyunca fotoğrafın kendi beyazı ile kutunun kremi arasında görünür bir kenar oluşuyor ve sayfa üç ayrı ton taşıyormuş gibi duruyordu. Beyaz seçilince fotoğrafın fonu kutuyla birleşir. */ --product-bg: #ffffff; /* Her iki temada da koyu kalan yüzey */ --deep: #121216; --on-deep: #eae7e1; --deep-line: #2a2a33; /* Durum renkleri */ --ok: #5fbf8b; --ok-bg: rgba(95, 191, 139, .12); --warn: #e0b355; --warn-bg: rgba(224, 179, 85, .12); --danger: #e2726b; --danger-bg: rgba(226, 114, 107, .12); /* Gölge — koyu temada gölge yerine ışık halkası daha iyi okunuyor */ --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 8px 24px rgba(0,0,0,.45); --shadow-3: 0 20px 50px rgba(0,0,0,.55); --ring: 0 0 0 3px var(--accent-dim); /* Ölçü */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Jakarta', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Başlık ağırlıkları — tek yerden yönetilir ki hiyerarşi tutarlı kalsın */ --w-display: 800; /* hero */ --w-h1: 750; --w-h2: 700; --w-h3: 650; /* Sıkı harf aralığı büyük puntoda "premium" hissin asıl kaynağıdır. Punto büyüdükçe negatifleşir — optik düzeltme. */ --tr-display: -.035em; --tr-h1: -.028em; --tr-h2: -.022em; --tr-h3: -.012em; --wrap: 1200px; --wrap-narrow: 760px; --ease: cubic-bezier(.4, 0, .2, 1); color-scheme: dark; } /* ------------------------------------------------------------- TOKEN: AÇIK */ :root[data-theme="light"] { --bg: #faf8f4; --surface: #ffffff; --surface-2: #f4f1ea; --surface-3: #ece7dd; --line: #e0dad0; --line-soft: #ece7de; --text: #1a1815; --text-2: #4a463f; --muted: #7c7770; /* Açık temada altın koyulaşır — fildişi zeminde parlak altın okunmaz */ --accent: #8a6d16; --accent-2: #6d5510; --accent-dim: rgba(138, 109, 22, .13); --on-accent: #fffdf5; --product-bg: #ffffff; /* --deep ve --on-deep KASITLI OLARAK koyu kalır: alt bilgi ve duyuru şeridi iki temada da koyu görünsün, marka çıpası sabit dursun. */ --deep: #17161a; --on-deep: #eae7e1; --deep-line: #2e2d34; --ok: #2f7d55; --ok-bg: rgba(47, 125, 85, .1); --warn: #9a6f14; --warn-bg: rgba(154, 111, 20, .1); --danger: #b23c34; --danger-bg: rgba(178, 60, 52, .1); --shadow-1: 0 1px 2px rgba(26,24,21,.06); --shadow-2: 0 8px 24px rgba(26,24,21,.08); --shadow-3: 0 20px 50px rgba(26,24,21,.12); color-scheme: light; } /* ------------------------------------------------------------------- RESET */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { font-family: var(--font); font-size: 16px; font-weight: 420; /* değişken font: 400 ile 500 arası, ekranda daha dolgun */ line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; /* Tema geçişi ani olmasın ama sayfa açılışında da titremesin */ transition: background-color .25s var(--ease), color .25s var(--ease); } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } /* Ekran okuyucuya görünür, gözle görünmez */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Klavyeyle gezinende ilk durak */ .skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200; padding: var(--sp-3) var(--sp-4); background: var(--accent); color: var(--on-accent); border-radius: 0 0 var(--r) 0; } .skip:focus { inset-inline-start: 0; } /* ------------------------------------------------------------------ DÜZEN */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); } .wrap--narrow { max-width: var(--wrap-narrow); } main { flex: 1; } .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-6); } .stack > * + * { margin-top: var(--sp-4); } .stack--lg > * + * { margin-top: var(--sp-6); } .row { display: flex; gap: var(--sp-4); align-items: center; } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .grid { display: grid; gap: var(--sp-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* --------------------------------------------------------------- TİPOGRAFİ */ /* Başlık ölçeği. Ağırlık ve harf aralığı token'dan gelir; punto büyüdükçe satır yüksekliği düşer ve aralık sıkışır — Apple'ın tipografisini "premium" yapan şey budur, süslü bir harf biçimi değil. */ .display { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: 1.02; font-size: clamp(2.6rem, 6.4vw, 4.6rem); } .h1 { font-family: var(--font-display); font-weight: var(--w-h1); letter-spacing: var(--tr-h1); line-height: 1.08; font-size: clamp(2.1rem, 4.6vw, 3.1rem); } .h2 { font-family: var(--font-display); font-weight: var(--w-h2); letter-spacing: var(--tr-h2); line-height: 1.12; font-size: clamp(1.7rem, 3.1vw, 2.3rem); } .h3 { font-family: var(--font-display); font-weight: var(--w-h3); letter-spacing: var(--tr-h3); font-size: 1.15rem; } .lede { font-size: 1.125rem; color: var(--text-2); max-width: 62ch; } .small { font-size: .875rem; } .tiny { font-size: .78rem; } .muted { color: var(--muted); } .center { text-align: center; } .eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } /* ----------------------------------------------------------------- DÜĞMELER */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: .78rem 1.4rem; border-radius: var(--r-full); font-size: .93rem; font-weight: 650; line-height: 1; letter-spacing: -.01em; border: 1px solid transparent; transition: transform .12s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-2); } .btn--ghost { border-color: var(--line); color: var(--text); background: transparent; } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--solid { background: var(--surface-3); color: var(--text); } .btn--solid:hover { background: var(--line); } .btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .btn--sm { padding: .5rem .9rem; font-size: .82rem; } .btn--lg { padding: 1rem 2rem; font-size: 1rem; } .btn--full { width: 100%; } /* Yalnızca ikon taşıyan kare düğme (örn. paylaş). .btn--lg'den sonra tanımlı ki dolgusu kareye dönsün. Yükseklik komşu düğmelerle hizalı kalır. */ .btn--icon { padding: 0; flex: 0 0 auto; aspect-ratio: 1; width: 52px; } .btn--icon.btn--sm { width: 40px; } .btn--icon svg { width: 20px; height: 20px; } /* Kısa "kopyalandı" geri bildirimi */ .btn--icon.is-copied { border-color: var(--ok); color: var(--ok); } /* ------------------------------------------------------------------ ROZET */ .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--r-full); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: var(--surface-3); color: var(--text-2); } .badge--accent { background: var(--accent-dim); color: var(--accent); } .badge--ok { background: var(--ok-bg); color: var(--ok); } .badge--warn { background: var(--warn-bg); color: var(--warn); } .badge--danger { background: var(--danger-bg); color: var(--danger); } /* ------------------------------------------------------------------- ÜST BAR */ /* Duyuru şeridi — iki temada da koyu kalır */ .announce { background: var(--deep); color: var(--on-deep); font-size: .82rem; text-align: center; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--deep-line); } .announce strong { color: var(--accent); font-weight: 600; } .header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line-soft); } .header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 68px; } .logo { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: baseline; gap: .3rem; } .logo span { color: var(--accent); } .nav { display: flex; gap: var(--sp-5); align-items: center; margin-inline-start: var(--sp-4); } .nav a { font-size: .9rem; font-weight: 550; color: var(--text-2); letter-spacing: -.008em; padding-block: .4rem; position: relative; white-space: nowrap; /* "Delay Sprays" dar ekranda iki satıra kırılmasın */ transition: color .16s var(--ease); } .nav a:hover, .nav a[aria-current="page"] { color: var(--text); } .nav a[aria-current="page"]::after { content: ''; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--accent); border-radius: 2px; } .header__tools { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); } .icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--text-2); transition: background-color .16s var(--ease), color .16s var(--ease); position: relative; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 20px; height: 20px; } .cart-count { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 4px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); border-radius: var(--r-full); font-size: .68rem; font-weight: 700; line-height: 1; } .cart-count[hidden] { display: none; } /* Dil seçici */ /* Banner araması — açılır panel (dil menüsüyle aynı davranış). */ .hsearch { position: relative; } .hsearch__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 55; width: min(340px, 92vw); display: none; gap: var(--sp-2); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); } /* Ödeme seçenekleri ayıracı ("veya") — PayPal ile fatura seçeneği arası */ .pay-sep { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; } .pay-sep::before, .pay-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* Checkout güven öğeleri */ .trust-note { display: flex; align-items: flex-start; gap: var(--sp-2); } .trust-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--accent); } .trust-line { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; } .trust-line svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--muted); } .agree { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; line-height: 1.55; } .agree input { accent-color: var(--accent); margin-top: 2px; flex: 0 0 auto; } .pay-disabled { pointer-events: none; opacity: .45; filter: grayscale(.5); } /* Canlı kargo seçenekleri (checkout özeti) */ .ship-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } .ship-opt { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-full); padding: .55rem .9rem; cursor: pointer; transition: border-color .15s var(--ease); } .ship-opt:hover { border-color: var(--accent); } .ship-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .ship-opt input { accent-color: var(--accent); } .ship-opt__price { margin-inline-start: auto; font-weight: 650; } /* PayPal buton iframe'leri: sayfa koyu color-scheme bildirince Chromium, iframe şeffaflığını bozup arkasına OPAK BEYAZ zemin basıyor. Konteynerde color-scheme'i açığa sabitlemek şeffaflığı geri getirir — butonlar koyu panelin üstünde zeminsiz oturur. */ #paypal-button, #express-button { color-scheme: light; } /* ÖDEME EYLEM KOLONU — PayPal SDK buton yığınını ~300px sabit çizer; iframe'e genişlik dayatmak yükseklik hesabını bozup son butonu yarım bırakıyor. Bu yüzden SDK'ya dokunulmaz: Checkout, ayraç ve diğer eylem butonları da AYNI 300px kolona alınıp ortalanır. min() sigortası: panel 300px'ten darsa hepsi birlikte daralır, hiçbir buton kenardan taşamaz. */ #paypal-button, #express-button { max-width: 100%; } /* SDK yüklenirken önce 150px'lik ön-izleme karesi MUTLAK konumla çizilir; alan ayrılmazsa birkaç saniye alttaki açıklama yazısının üstüne biner (ilk açılışta özensiz/şüpheli görünüm). Baştan yer ayır: bindirme olmaz, butonlar gelince yerleşim de neredeyse hiç oynamaz. */ #paypal-button, #express-button { min-height: 150px; } /* CSP, SDK'nın kendi enjekte ettiği