/* ============================================================ SAATÇİ PLUS — Premium açık tema Fontlar HTML içinde ile yüklenir (performans). ============================================================ */ :root { --bg: #ffffff; /* beyaz zemin (referans) */ --bg-2: #f4f5f7; /* hafif gri bölümler */ --panel: #ffffff; /* kartlar / yüzeyler */ --line: #e4e4e7; /* ince gri çerçeveler */ --text: #14151a; /* ana metin (siyah) */ --muted: #6c6f78; /* ikincil metin */ /* Vurgu rengi: referans lacivert. Eski "gold" değişkenleri lacivere yönlendirildi. */ --gold: #1c2d5a; /* ana vurgu (lacivert) */ --gold-soft: #26407a; /* degrade/hover lacivert */ --gold-hi: #33509a; /* açık lacivert */ --navy: #1c2d5a; --green: #1faa52; /* WhatsApp yeşili */ --dark: #14151a; --radius: 3px; /* çizgisel/keskin köşe */ --shadow: 0 14px 34px rgba(20,25,45,.12); --shadow-sm: 0 6px 18px rgba(20,25,45,.08); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Poppins', 'Montserrat', Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .container { width: min(1240px, 92%); margin: 0 auto; } /* ---------- Üst çubuk ---------- */ .topbar { background: var(--navy); border-bottom: 1px solid #16234a; font-size: 12.5px; letter-spacing: .5px; color: #c8d2e8; } .topbar a { color: #ffffff; } .topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 12px; flex-wrap: wrap; } .topbar .dot { color: #8fa2cf; margin: 0 8px; } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; transition: padding .3s ease; } .header.scrolled { box-shadow: 0 6px 24px rgba(60,48,20,.10); } .header.scrolled .container { padding: 9px 0; } .header.scrolled .logo img { height: 44px; } .logo img { height: 54px; width: auto; transition: height .3s ease; } .nav { display: flex; gap: 6px; flex-wrap: wrap; } .nav a { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 15px; border-radius: 999px; color: var(--muted); border: 1px solid transparent; transition: .25s; white-space: nowrap; } .nav a:hover { color: var(--text); } .nav a.active { color: #fff; background: var(--navy); font-weight: 600; } .header-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { border: 1px solid var(--line); background: var(--panel); color: var(--muted); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: .2s; } .icon-btn:hover { color: var(--gold); border-color: var(--gold); } /* ---------- Hero (tam genişlikte video) ---------- */ .hero { position: relative; overflow: hidden; min-height: min(78vh, 680px); display: flex; align-items: center; border-bottom: 1px solid var(--line); background: #0f1526; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Hero görsel slider (3 sn'de bir otomatik geçiş) */ .hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; will-change: opacity; } .hero-slide.active { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } } /* Video yoksa arka plan görseli sinematik yavaş zoom yapar */ .hero-kb { animation: kenburns 22s ease-in-out infinite alternate; } video.hero-bg { z-index: 1; background: transparent; } @keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } } @media (prefers-reduced-motion: reduce) { .hero-kb { animation: none; } } .hero-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(8,12,26,.74) 0%, rgba(8,12,26,.45) 45%, rgba(8,12,26,.18) 100%), linear-gradient(0deg, rgba(8,12,26,.58), transparent 55%); } .hero-inner { position: relative; z-index: 3; padding: 60px 0; } .hero .eyebrow { color: #c3cee8; letter-spacing: 4px; font-size: 12px; text-transform: uppercase; margin-bottom: 18px; } .hero h1 { font-family: var(--serif); font-weight: 600; line-height: 1.06; color: #fff; font-size: clamp(40px, 5.4vw, 74px); letter-spacing: .5px; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero h1 .accent { background: linear-gradient(135deg, #eaf0fb, #aebfe6); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .hero p { color: #ece7dd; max-width: 520px; margin: 20px 0 0; font-weight: 300; font-size: 16px; } .hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 12px 26px; margin-top: 32px; flex-wrap: wrap; } .hero-stats div { display: flex; align-items: center; gap: 8px; color: #eef2fb; font-size: 14.5px; font-weight: 500; letter-spacing: .3px; } .hero-stats .hs-ic { color: #e2b95a; font-size: 15px; } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 12px 0; } .marquee-track { display: flex; gap: 44px; white-space: nowrap; width: max-content; animation: scroll-x 26s linear infinite; } .marquee-track span { color: var(--muted); font-size: 12px; letter-spacing: 3px; font-weight: 500; } @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- Marka hikâyesi ---------- */ .story { position: relative; text-align: center; padding: 72px 0; background: radial-gradient(700px 300px at 50% 0%, rgba(28,45,90,.08), transparent 60%), var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .story-inner { max-width: 640px; } .story-badge { width: 54px; height: 54px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(28,45,90,.35); color: var(--navy); font-size: 22px; } .story h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 46px); font-weight: 600; } .story h2 .accent { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .story p { color: var(--muted); font-weight: 300; margin: 16px auto 26px; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hv-card, .hv-glow, .marquee-track { animation: none; } } .btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 13px 26px; border-radius: 999px; font-size: 13.5px; letter-spacing: 1px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: .22s; font-weight: 500; } .btn:hover { transform: translateY(-2px); border-color: var(--gold); } .btn-gold { background: var(--navy); color: #fff; border: none; font-weight: 600; } .btn-gold:hover { box-shadow: 0 10px 30px rgba(28,45,90,.32); } .btn-wa { background: var(--green); color: #fff; border: none; font-weight: 600; } .btn-wa:hover { box-shadow: 0 10px 30px rgba(31,170,82,.3); } .btn-pay { background: linear-gradient(135deg, #2a4fb5, #1c2d5a); color: #fff; border: none; font-weight: 600; } .btn-pay:hover { box-shadow: 0 10px 30px rgba(28,45,90,.35); } /* ---------- Şerit / güven rozetleri ---------- */ .trust { border-bottom: 1px solid var(--line); background: var(--bg-2); } .trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px 0; } .trust .item { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; } .trust .item .ic { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: #eaeef6; color: var(--navy); flex: 0 0 auto; border: 1px solid #d5def0; } .trust .item strong { color: var(--text); display: block; font-size: 13.5px; font-weight: 600; } /* ---------- Bölüm başlığı ---------- */ .section { padding: 56px 0; } .section-head { text-align: center; margin-bottom: 34px; } .section-head .eyebrow { color: var(--gold); letter-spacing: 4px; font-size: 12px; text-transform: uppercase; } .section-head h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); font-weight: 600; margin-top: 6px; } .section-head p { color: var(--muted); font-weight: 300; margin-top: 8px; } /* ---------- Ürün ızgarası ---------- */ .grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; cursor: pointer; display: flex; flex-direction: column; } .grid .card:hover, .grid .card.reveal.in:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: var(--shadow); } .card .thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f5f7; border-bottom: 1px solid var(--line); } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: .5s; } .card:hover .thumb img { transform: scale(1.05); } .card .badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--navy); color: #fff; font-size: 10px; letter-spacing: 1.2px; padding: 4px 9px; text-transform: uppercase; font-weight: 500; } .card .stock-out { position: absolute; inset: 0; background: rgba(15,21,38,.55); display: grid; place-items: center; color: #fff; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; } .card .body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; text-align: center; align-items: center; } .card .cat { color: var(--navy); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; } .card .title { font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); } .card .spec-line { color: var(--muted); font-size: 12px; letter-spacing: .3px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; } .card .spec-line span { position: relative; } .card .spec-line span:not(:last-child)::after { content: "•"; color: var(--line); margin-left: 8px; } .card .price-row { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: auto; padding-top: 6px; } .card .price { color: var(--text); font-size: 18px; font-weight: 600; } .card .stock { color: var(--muted); font-size: 11px; } .card .order-btn { margin-top: 10px; width: 100%; justify-content: center; padding: 11px; background: var(--navy); color: #fff; border: none; border-radius: 0; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-family: var(--sans); font-size: 12px; transition: .2s; } .card .order-btn:hover { background: var(--gold-soft); } .card .order-btn.added { background: var(--green); } /* Boş kategori durumu */ .empty { text-align: center; padding: 70px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-2); } .empty .ic { font-size: 40px; margin-bottom: 12px; } .empty h3 { font-family: var(--serif); color: var(--text); font-size: 26px; margin-bottom: 6px; } /* ---------- Ürün modalı ---------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(15,21,38,.55); backdrop-filter: blur(6px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; } .modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; } /* Modal yatayda ortalı; içerik sığarsa dikeyde ortalanır, sığmazsa üstten başlar ve sorunsuz kaydırılır (üst asla kırpılmaz). */ .modal-overlay.open > .modal { margin-top: auto; margin-bottom: auto; } body.modal-open { overflow: hidden; } .modal { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; width: min(920px, 100%); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; animation: pop .25s ease; } @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal .m-img { background: #f4f5f7; position: relative; overflow: hidden; cursor: zoom-in; touch-action: pan-y; } .modal .m-img img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; transition: transform .25s ease; transform-origin: center center; will-change: transform; } .modal .m-img.zooming { cursor: zoom-out; } .modal .m-img.zooming img { transition: transform .06s linear; } .zoom-hint { position: absolute; bottom: 12px; left: 12px; z-index: 2; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; background: rgba(20,17,12,.62); color: #fff; font-size: 11px; letter-spacing: .5px; padding: 6px 11px; border-radius: 999px; transition: opacity .2s ease; } .modal .m-img.zooming .zoom-hint { opacity: 0; } /* Dokunmatik cihazlarda yakınlaştırma ipucu gizli (kaydırmayı engellememek için) */ @media (hover: none) { .zoom-hint { display: none; } } /* Modal görsel galerisi (çoklu görsel) */ .m-gallery { display: flex; flex-direction: column; background: #f4f5f7; min-width: 0; } .m-gallery .m-img { flex: 1 1 auto; } .m-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; } .m-thumb { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: #fff; transition: border-color .15s ease; } .m-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .m-thumb.active { border-color: var(--navy); } .m-thumb:hover { border-color: var(--gold-soft); } .modal .m-body { padding: 30px; position: relative; display: flex; flex-direction: column; } .modal .close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); cursor: pointer; font-size: 18px; } .modal .close:hover { color: var(--gold); } .modal .m-cat { color: var(--gold); letter-spacing: 3px; font-size: 11px; text-transform: uppercase; } .modal .m-title { font-family: var(--serif); font-size: 34px; font-weight: 600; margin: 8px 0 4px; } .modal .m-price { color: var(--gold); font-size: 26px; font-weight: 600; margin: 6px 0; } .modal .m-price .old-price { font-size: 18px; margin-right: 8px; } .modal .m-price .new-price { color: var(--gold); } .modal .m-price .disc-badge { display: inline-block; margin-left: 10px; background: #c23a30; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; vertical-align: middle; } /* Fiyat / indirim (kart + genel) */ .price-line { display: inline-flex; align-items: baseline; gap: 6px; justify-content: center; flex-wrap: wrap; } .old-price { text-decoration: line-through; color: var(--muted); font-weight: 500; font-size: 14px; } .card .disc-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: #c23a30; color: #fff; font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; letter-spacing: .3px; } /* Sepet indirim satırları */ .ci-old { text-decoration: line-through; color: var(--muted); font-size: 12px; } .cart-line-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; } .cart-line-row.disc { color: #1a8f45; font-weight: 600; } .cart-hint { background: #eef8f0; border: 1px solid #bfe6c9; color: #1a7a3f; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; text-align: center; } .modal .m-desc { color: var(--muted); font-weight: 300; margin: 10px 0 18px; } .modal .m-meta { display: flex; gap: 18px; color: var(--muted); font-size: 13px; margin-bottom: 20px; flex-wrap: wrap; } .modal .m-meta b { color: var(--text); } /* Ürün özellikleri tablosu */ .m-specs { margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .m-specs-title { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); background: var(--bg-2); padding: 9px 14px; font-weight: 600; } .m-specs dl { display: grid; grid-template-columns: auto 1fr; } .m-specs dt, .m-specs dd { padding: 9px 14px; font-size: 13px; border-top: 1px solid var(--line); } .m-specs dt { color: var(--muted); background: #fbf9f5; white-space: nowrap; } .m-specs dd { color: var(--text); font-weight: 500; text-align: right; } .modal .m-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .modal .m-actions .btn { justify-content: center; } .modal .hint { color: var(--muted); font-size: 12px; text-align: center; margin-top: 4px; } /* ---------- Ürün altı kutu (ek ürün) seçeneği ---------- */ .addon-box { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 2px 0 8px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .addon-box.selected { border-color: var(--gold); background: rgba(199, 163, 74, .07); } .addon-box .ab-img { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--line); background: #f4f5f7; } .addon-box .ab-img img { width: 100%; height: 100%; object-fit: cover; } .addon-box .ab-info { flex: 1 1 auto; min-width: 0; } .addon-box .ab-title { font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.3; } .addon-box .ab-price { font-size: 13px; margin-top: 3px; } .addon-box .ab-old { color: var(--muted); text-decoration: line-through; margin-right: 6px; font-size: 12px; } .addon-box .ab-new { color: var(--gold); font-weight: 700; } /* Anahtar (toggle) */ .ab-toggle { flex: 0 0 auto; width: 44px; height: 25px; border-radius: 999px; border: none; background: #cfd3da; position: relative; cursor: pointer; padding: 0; transition: background .15s ease; } .ab-toggle .ab-knob { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s ease; } .ab-toggle.on { background: var(--gold); } .ab-toggle.on .ab-knob { left: 22px; } /* Sepette kutu satırı */ .ci-addon { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; } .ci-addon-txt { flex: 1 1 auto; color: var(--muted); } .ci-addon.on .ci-addon-txt { color: var(--text); font-weight: 500; } .ci-addon-price { color: var(--gold); font-weight: 700; } .ci-addon-tgl { flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; border: none; background: #cfd3da; position: relative; cursor: pointer; padding: 0; transition: background .15s ease; } .ci-addon-tgl .ab-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s ease; } .ci-addon-tgl.on { background: var(--gold); } .ci-addon-tgl.on .ab-knob { left: 19px; } /* ---------- Kapıda Ödeme bilgi formu ---------- */ .modal.cod-modal { grid-template-columns: 1fr; width: min(520px, 100%); } .cod-modal .m-desc { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; color: var(--text); font-weight: 500; font-size: 14px; margin: 8px 0 18px; } #codForm, #payForm { display: flex; flex-direction: column; gap: 14px; } #codForm .field, #payForm .field { display: flex; flex-direction: column; gap: 5px; } #codForm .row2, #payForm .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #codForm label, #payForm label { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; } #codForm label .req, #payForm label .req { color: #c23a30; } #codForm input, #codForm textarea, #codForm select, #payForm input, #payForm textarea, #payForm select { width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease; } #codForm input::placeholder, #codForm textarea::placeholder, #payForm input::placeholder, #payForm textarea::placeholder { color: #b3b0a8; } #codForm input:focus, #codForm textarea:focus, #codForm select:focus, #payForm input:focus, #payForm textarea:focus, #payForm select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(28,45,90,.12); } #codForm select:disabled, #payForm select:disabled { opacity: .55; cursor: not-allowed; background: var(--bg-2); } #codForm textarea, #payForm textarea { resize: vertical; line-height: 1.5; } #paySubmit[disabled] { opacity: .65; cursor: progress; } .cod-error { background: #fdeceb; border: 1px solid #f3c2bd; color: #b02a1f; border-radius: 8px; padding: 10px 13px; font-size: 13px; font-weight: 500; } .cod-submit { justify-content: center; margin-top: 2px; } /* ---------- Havale + Kargo Takip ---------- */ .btn-havale { background: #0f2d52; color: #fff; border: none; font-weight: 600; } .btn-havale:hover { box-shadow: 0 10px 30px rgba(15,45,82,.32); } .havale-box { background: #eef3fb; border: 1px solid #cdd9ee; color: #2a3a55; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; margin: 4px 0 14px; } .havale-box .hd-promo { background: #eaf6ee; border: 1px solid #bfe6c9; color: #167a3a; border-radius: 8px; padding: 10px 12px; font-size: 13px; font-weight: 600; text-align: center; margin-bottom: 10px; line-height: 1.45; } .havale-box .hd-promo b { color: #0f6b31; } .havale-box .hd-title { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; color: #1c2d5a; } .havale-box .hd-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .havale-box .hd-row span { color: #5a6b88; } .havale-box .hd-row b { color: #1c2d5a; } .havale-box .hd-iban { display: flex; align-items: center; gap: 8px; margin: 8px 0; background: #fff; border: 1px solid #cdd9ee; border-radius: 8px; padding: 8px 10px; } .havale-box .hd-iban-val { flex: 1; font-family: 'Poppins', monospace; font-weight: 600; font-size: 13.5px; letter-spacing: .4px; color: #1c2d5a; word-break: break-all; user-select: all; } .havale-box .hd-copy { flex: 0 0 auto; border: none; background: var(--navy); color: #fff; border-radius: 6px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s ease; } .havale-box .hd-copy:hover { background: #26407a; } .havale-box .hd-copy.copied { background: var(--green); } .havale-box .hd-note { font-size: 12px; color: #5a6b88; margin-top: 6px; line-height: 1.5; } .topbar-right { display: inline-flex; align-items: center; gap: 14px; } .topbar-link { background: none; border: none; color: #fff; cursor: pointer; font: inherit; font-size: 12.5px; letter-spacing: .5px; padding: 0; } .topbar-link:hover { color: #cdd9ee; text-decoration: underline; } /* Sipariş başarı ekranı (takip kodu) */ .cod-success { text-align: center; padding: 8px 0 4px; } .cod-success .cs-ic { font-size: 46px; margin-bottom: 6px; } .cod-success h3 { font-family: var(--serif); font-size: 26px; margin-bottom: 6px; } .cod-success p { color: var(--muted); font-size: 14px; } .cs-code { font-family: 'Poppins', monospace; font-size: 25px; font-weight: 700; letter-spacing: 2px; color: var(--navy); background: var(--bg-2); border: 1px dashed var(--navy); border-radius: 10px; padding: 12px; margin: 12px 0; user-select: all; word-break: break-all; } .cs-note { font-size: 12.5px; margin-top: 4px; } .cs-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .cs-actions .btn { justify-content: center; } /* Kargo takip penceresi */ .modal.track-modal { grid-template-columns: 1fr; width: min(520px, 100%); } #trackForm { display: flex; flex-direction: column; gap: 12px; } #trackForm .field { display: flex; flex-direction: column; gap: 5px; } #trackForm label { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; } #trackForm input { width: 100%; font-family: var(--sans); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; text-align: center; } #trackForm input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(28,45,90,.12); } #trackBtn { justify-content: center; } .track-result { margin-top: 20px; } .tr-head { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 16px; } .tr-head b { color: var(--navy); font-size: 16px; } .tr-steps { position: relative; } .tr-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; position: relative; } .tr-step .tr-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; background: var(--bg-2); color: var(--muted); border: 2px solid var(--line); z-index: 1; } .tr-step .tr-lbl { font-size: 14px; color: var(--muted); } .tr-step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: -8px; width: 2px; background: var(--line); } .tr-step.done .tr-dot, .tr-step.active .tr-dot { background: var(--navy); color: #fff; border-color: var(--navy); } .tr-step.done .tr-lbl { color: var(--text); } .tr-step.active .tr-lbl { color: var(--navy); font-weight: 600; } .tr-step.active .tr-dot { box-shadow: 0 0 0 4px rgba(28,45,90,.15); } .tr-step.done:not(:last-child)::before { background: var(--navy); } .tr-summary { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; } .tr-summary > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .tr-summary span { color: var(--muted); flex: 0 0 auto; } .tr-summary b { color: var(--text); text-align: right; font-weight: 600; } .tr-cancel { background: #fdeceb; border: 1px solid #f3c2bd; color: #b02a1f; border-radius: 10px; padding: 14px; text-align: center; font-size: 14px; margin-bottom: 14px; } /* ---------- Footer ---------- */ .footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 46px 0 26px; margin-top: 30px; } .footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 30px; } .footer h4 { font-family: var(--serif); font-size: 20px; margin-bottom: 12px; color: var(--gold-soft); } .footer p, .footer a { color: var(--muted); font-size: 13.5px; font-weight: 300; } .footer a:hover { color: var(--gold); } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .footer .brand-logo img { height: 60px; margin-bottom: 12px; } .footer .copy { text-align: center; color: var(--muted); font-size: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); } .footer .copy a { color: var(--gold); } /* ---------- Ödeme rozetleri ---------- */ .pay-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .pay-badges .pay-note { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); width: 100%; margin-bottom: 2px; } .pay-badges .pay { display: inline-flex; align-items: center; gap: 6px; } .pay-badges .pay svg { height: 26px; width: auto; border-radius: 6px; } .pay-badges .pay em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; } .footer .pay-badges { justify-content: flex-start; } /* ---------- Yasal / kurumsal sayfalar ---------- */ .page-head { background: radial-gradient(700px 300px at 50% 0%, rgba(212,175,55,.12), transparent 60%), var(--bg-2); border-bottom: 1px solid var(--line); text-align: center; padding: 50px 0 40px; } .page-head .eyebrow { color: var(--gold); letter-spacing: 4px; font-size: 12px; text-transform: uppercase; } .page-head h1 { font-family: var(--serif); font-size: clamp(30px, 4.5vw, 50px); font-weight: 600; margin-top: 8px; } .page-head p { color: var(--muted); font-weight: 300; margin-top: 8px; } .breadcrumb { color: var(--muted); font-size: 12.5px; margin-top: 14px; } .breadcrumb a { color: var(--gold); } .legal { width: min(880px, 92%); margin: 0 auto; padding: 44px 0 64px; } .legal h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--text); margin: 30px 0 10px; padding-top: 8px; } .legal h2:first-child { margin-top: 0; } .legal h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; color: var(--text); } .legal p, .legal li { color: #3d3a33; font-weight: 300; font-size: 15px; line-height: 1.75; } .legal p { margin: 8px 0; } .legal ul, .legal ol { margin: 8px 0 8px 22px; } .legal li { margin: 5px 0; } .legal strong { font-weight: 600; color: var(--text); } .legal a { color: var(--gold); } .legal .updated { color: var(--muted); font-size: 13px; font-style: italic; margin-bottom: 18px; } /* Bilgi kartı (İletişim / satıcı künyesi) */ .info-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin: 6px 0 26px; } .info-card .info-title { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); background: var(--bg-2); padding: 12px 18px; font-weight: 600; border-bottom: 1px solid var(--line); } .info-card dl { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; } .info-card dt, .info-card dd { padding: 12px 18px; font-size: 14px; border-top: 1px solid var(--line); } .info-card dl > dt:first-of-type, .info-card dl > dt:first-of-type + dd { border-top: none; } .info-card dt { color: var(--muted); background: #fbf9f5; font-weight: 500; } .info-card dd { color: var(--text); font-weight: 500; word-break: break-word; } .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 30px; } /* Sahibine uyarı şeridi (yer tutucular doldurulunca kaldırın) */ .owner-note { background: #fff7e6; border: 1px solid #f0d79a; color: #7a5a12; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; margin: 0 0 26px; } .owner-note strong { color: #8a5a00; } /* ---------- Sepet ---------- */ .cart-btn { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: .2s; } .cart-btn:hover { border-color: var(--navy); color: var(--navy); } .cart-btn svg { width: 22px; height: 22px; } .cart-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; display: none; place-items: center; line-height: 1; border: 2px solid var(--bg); } /* Karttaki hızlı sepete ekle */ .card .add-cart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 999px; border: none; cursor: pointer; background: rgba(255,255,255,.92); color: var(--navy); font-size: 16px; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .15s ease, background .15s ease, color .15s ease; } .card .add-cart:hover { background: var(--navy); color: #fff; transform: scale(1.08); } .card .add-cart.added { background: var(--green); color: #fff; transform: scale(1.15); } /* Modaldaki sepete ekle butonu */ .btn-cart-add { background: var(--bg-2); color: var(--navy); border: 1px solid var(--navy); font-weight: 600; } .btn-cart-add:hover { background: var(--navy); color: #fff; } /* Sepet çekmecesi */ .cart-overlay { position: fixed; inset: 0; z-index: 98; display: none; background: rgba(15,21,38,.5); backdrop-filter: blur(4px); } .cart-overlay.open { display: block; } .cart-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(430px, 100%); background: var(--panel); display: flex; flex-direction: column; box-shadow: -14px 0 44px rgba(20,25,45,.22); animation: cartIn .25s ease; } @keyframes cartIn { from { transform: translateX(100%); } to { transform: none; } } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .cart-head h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; } .cart-head .close { position: static; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); cursor: pointer; font-size: 18px; } .cart-head .close:hover { color: var(--navy); } .cart-scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px; -webkit-overflow-scrolling: touch; } .cart-foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .cart-foot .btn { justify-content: center; } .cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); } .ci-img { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); } .ci-img img { width: 100%; height: 100%; object-fit: cover; } .ci-title { font-weight: 500; font-size: 14px; line-height: 1.3; } .ci-price { color: var(--muted); font-size: 13px; margin: 2px 0 8px; } .ci-qty { display: flex; align-items: center; gap: 7px; } .ci-qty button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 15px; color: var(--text); display: grid; place-items: center; } .ci-qty .q-inc:hover, .ci-qty .q-dec:hover { border-color: var(--navy); color: var(--navy); } .ci-qty .q-val { min-width: 20px; text-align: center; font-weight: 600; font-size: 14px; } .ci-qty .ci-remove { margin-left: 2px; border-color: transparent; font-size: 13px; } .ci-qty .ci-remove:hover { color: #c23a30; border-color: #f0c9c4; } .ci-line { font-weight: 600; color: var(--navy); font-size: 15px; white-space: nowrap; padding-top: 2px; } .cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .cart-total span { color: var(--muted); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; } .cart-total b { font-family: var(--serif); font-size: 26px; color: var(--text); } .cart-empty { text-align: center; padding: 64px 20px; color: var(--muted); } .cart-empty .ic { font-size: 44px; margin-bottom: 12px; } .cart-empty p { margin-bottom: 18px; } /* Bildirim */ .toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px rgba(20,25,45,.3); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- WhatsApp yüzen buton ---------- */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.4); color: #fff; transition: .2s; } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 30px; height: 30px; } /* ---------- Duyarlı ---------- */ @media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } .trust .container { grid-template-columns: repeat(2, 1fr); } .hero { min-height: min(70vh, 560px); } .footer .cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .topbar { font-size: 11px; } .topbar .container { justify-content: center; } .topbar .hide-sm { display: none; } .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .modal-overlay { padding: 0; } /* Üstten hizala: içerik ekrandan uzunsa modal doğal boyuna uzar ve overlay dikeyde kayar (stretch, modalı ekran boyuna sabitleyip altını kırpıyordu). */ .modal-overlay.open { align-items: flex-start; } .modal { grid-template-columns: 1fr; border-radius: 0; border: none; min-height: 100%; width: 100%; margin: 0; } .modal-overlay.open > .modal { margin: 0; } .modal .m-img img { min-height: 240px; max-height: 46vh; } .modal .m-body { padding: 22px; } .header .container { flex-wrap: wrap; gap: 12px; } .logo img { height: 46px; } /* Nav: yatay kaydırılabilir şerit */ .nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { flex: 0 0 auto; } .card .cat { font-size: 10px; letter-spacing: 1.5px; } .card .title { font-size: 15px; line-height: 1.3; } .card .price { font-size: 17px; } .card .stock { font-size: 11px; } .card .body { padding: 13px 13px 15px; gap: 7px; } .card .order-btn { font-size: 12px; letter-spacing: .5px; padding: 11px 6px; margin-top: 8px; } .footer .cols { grid-template-columns: 1fr; gap: 22px; text-align: center; } .footer ul { align-items: center; } .footer .brand-logo img { margin-left: auto; margin-right: auto; } .hero { min-height: min(72vh, 520px); } .hero-inner { padding: 44px 0; } .info-card dl { grid-template-columns: 1fr; } .info-card dd { padding-top: 0; border-top: none; } .info-card dt { border-top: 1px solid var(--line); } .info-card dl > dt:first-of-type { border-top: none; } .hero-scrim { background: linear-gradient(0deg, rgba(10,8,5,.72) 0%, rgba(10,8,5,.35) 60%, rgba(10,8,5,.25) 100%); } .wa-float { width: 52px; height: 52px; right: 14px; bottom: 14px; } } @media (max-width: 430px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 11px; } .card .body { padding: 11px 10px 13px; } .card .title { font-size: 13.5px; } .card .price { font-size: 15px; } .card .order-btn { font-size: 11px; padding: 10px 5px; } .section { padding: 40px 0; } .hero h1 { font-size: 34px; } .hero .cta { flex-direction: column; align-items: stretch; } .hero .cta .btn { justify-content: center; } }