/* ============================================================ AYANER MÜCEVHERAT — Estetik rafine katmanı Altın hairline'lar · ornamentler · shimmer · gradyan vurgular (base.css + pages.css'ten sonra yüklenir) ============================================================ */ /* ---------- ORNAMENT / BÖLÜM BAŞLIK SÜSLEMESİ ---------- */ .section-head.center::before { content: ''; display: block; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 0 auto 22px; } .section-head:not(.center)::before { content: ''; display: block; width: 42px; height: 2px; background: var(--gold-grad); margin-bottom: 22px; border-radius: 2px; } .ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto; } .ornament::before, .ornament::after { content: ''; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); } .ornament::after { background: linear-gradient(270deg, transparent, var(--line-2)); } .ornament i { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } /* ---------- EYEBROW: yan tireli ince hat ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; } .section-head.center .eyebrow { justify-content: center; } /* ---------- HERO ESTETİĞİ ---------- */ .hero { overflow: hidden; } .hero__copy { position: relative; } .hero__copy::before { content: ''; position: absolute; top: -8%; left: -6%; width: 380px; height: 380px; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 26%, transparent) 0%, transparent 68%); filter: blur(8px); pointer-events: none; z-index: 0; } .hero__copy > * { position: relative; z-index: 1; } /* hero'daki vurgulu kelime — koyu, yüksek kontrastlı altın gradyan (okunaklı) */ .hero__copy .serif-italic { /* italik 'saf' gradyan metni — sağ/alt taşmayı kırpmamak için bol padding */ display: inline-block; padding: .04em .30em .10em .06em; margin-right: .04em; overflow: visible; line-height: 1.05; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* dikey EST etiketi */ .hero__est { position: absolute; left: 22px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-display); font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: var(--muted); z-index: 2; display: flex; align-items: center; gap: 18px; } .hero__est::after { content: ''; height: 60px; width: 1px; background: linear-gradient(var(--accent), transparent); } .hero__media { overflow: hidden; } .hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- ALTIN BUTON SHIMMER ---------- */ .btn--gold { position: relative; overflow: hidden; } .btn--gold::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.7,.2,1); } .btn--gold:hover::after { left: 140%; } /* ---------- PRODUCT CARD RAFİNE ---------- */ .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); } .product-card:hover::before { transform: scaleX(1); } .product-card__media image-slot { transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; } .product-card:hover .product-card__media image-slot { transform: scale(1.045); } .product-card__price { position: relative; display: inline-block; } .product-card__foot { flex-direction: column; align-items: flex-start; gap: 9px; } .product-card__foot .btn--ghost { font-size: 11px; } .product-card__price::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s; } .product-card:hover .product-card__price::after { transform: scaleX(1); transform-origin: left; } /* ---------- KATEGORİ KARTI ZOOM ---------- */ .cat-card image-slot { transition: transform .9s cubic-bezier(.2,.7,.2,1); } .cat-card:hover image-slot { transform: scale(1.06); } .cat-card__overlay { z-index: 3; } /* ---------- FİYAT KARTLARI: altın üst hairline ---------- */ .prices { position: relative; } .prices::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), var(--accent-2), transparent); opacity: .7; } .price-card { transition: background .3s, box-shadow .3s; } .price-card:hover { box-shadow: inset 0 2px 0 var(--accent); } /* ---------- İSTATİSTİK: altın gradyan rakam ---------- */ .stat__num { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .stat__num .unit { -webkit-text-fill-color: currentColor; color: var(--accent-deep); } /* ---------- QUOTE: rafine ---------- */ .quote { position: relative; overflow: hidden; } .quote::before, .quote::after { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%); pointer-events: none; } .quote::before { top: -80px; left: -60px; } .quote::after { bottom: -90px; right: -50px; } .quote__inner { position: relative; z-index: 1; } .quote__mark { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- FOUNDER imza altın ---------- */ .founder__sign { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; } .founder__media { position: relative; } .founder__media::after { content: ''; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); pointer-events: none; } /* editorial ana görsele ince altın çerçeve */ .editorial__media > image-slot { position: relative; } .editorial__media { position: relative; } .editorial__media::before { content: ''; position: absolute; inset: -14px -14px 26px -14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); pointer-events: none; z-index: 0; } .editorial--reverse .editorial__media::before { inset: -14px -14px 26px -14px; } /* ---------- EDITORIAL: sol görsel sticky, sağ yazı kayar ---------- */ .editorial--sticky { align-items: start; } .editorial--sticky .editorial__media { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + 36px); align-self: start; } @media (max-width: 760px) { .editorial--sticky .editorial__media { position: relative; top: auto; } } /* ---------- BRAND: altın alt çizgi ---------- */ .brand { position: relative; } .nav .brand::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 26px; height: 1px; background: var(--accent); opacity: .7; } /* ---------- PAGE HERO süsleme + gradyan ---------- */ .page-hero { position: relative; overflow: hidden; background: radial-gradient(110% 130% at 50% -20%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0%, transparent 58%), linear-gradient(168deg, var(--bg-2) 0%, var(--surface-2) 52%, color-mix(in srgb, var(--accent-soft) 60%, var(--bg)) 100%); } #page-about .page-hero { background: radial-gradient(95% 120% at 50% 0%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0%, transparent 56%), radial-gradient(70% 90% at 88% 120%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%), linear-gradient(160deg, var(--bg-2) 0%, var(--accent-soft) 60%, color-mix(in srgb, var(--accent-2) 28%, var(--bg)) 100%); } .page-hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); z-index: 2; } .page-hero > * { position: relative; z-index: 1; } .page-hero .display-lg { position: relative; } /* ---------- ÜRÜN DETAY: başlık altın hat ---------- */ .pd__title { position: relative; } .pd__cat { display: inline-flex; align-items: center; gap: 10px; } .pd__cat::before { content: ''; width: 22px; height: 1px; background: var(--accent); } /* ---------- FOOTER altın üst hat ---------- */ .footer { position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); opacity: .5; } /* ---------- NEWSLETTER altın ışıma ---------- */ .newsletter { position: relative; overflow: hidden; } .newsletter::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 520px; height: 320px; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; } .newsletter__inner { position: relative; z-index: 1; } /* ---------- HERO (slider): küçük fiyat kartı + highlight etiketi ---------- */ .hero__badge { padding: 13px 16px 14px; min-width: 158px; } .hero__badge .eyebrow { font-size: 9px; letter-spacing: .2em; } .hero__badge .price { font-size: 20px; margin-top: 4px; } .hero__badge .delta { font-size: 11px; } .hero__tag { position: absolute; top: 22px; left: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 100px; padding: 9px 18px; font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .01em; color: var(--accent-deep); box-shadow: var(--shadow-sm); } .hero__tag .spark { color: var(--accent); font-size: 14px; font-style: normal; } /* ---------- NAV MENÜ: şık, hafif ışıklandırmalı efekt ---------- */ .nav__menu { gap: 34px; } .nav__menu a { font-size: 13.5px; letter-spacing: .08em; color: var(--ink-2); transition: color .35s ease, text-shadow .35s ease; } .nav__menu a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: -3px; height: 1.5px; background: var(--gold-grad); border-radius: 2px; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); transition: left .38s cubic-bezier(.2,.7,.2,1), right .38s cubic-bezier(.2,.7,.2,1), opacity .3s; opacity: 0; } .nav__menu a:hover { color: var(--accent-deep); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); } .nav__menu a:hover::after { left: 0; right: 0; opacity: 1; } .nav__menu a.is-active { color: var(--ink); } .nav__menu a.is-active::after { left: 0; right: 0; opacity: 1; } /* ---------- ÜRÜN AÇIKLAMA (akordeon) başlıkları ---------- */ .acc__body-inner h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 16px 0 6px; color: var(--ink); } .acc__body-inner h4:first-child { margin-top: 0; } .acc__body-inner p { margin: 0 0 4px; } .acc__body-inner strong { color: var(--accent-deep); } /* ============================================================ HAKKIMIZDA — bölüm geçişleri: gradyan ayraçlar, şekilli gölgeler, elmas süsler, aydınlık→koyu yumuşak geçiş ============================================================ */ /* Page-hero alt kenarına yumuşak altın gölge + dalgalı taban */ #page-about .page-hero { box-shadow: 0 36px 60px -48px color-mix(in srgb, var(--accent) 70%, transparent); } #page-about .page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .55; } /* Elmas süslü gradyan ayraç — bölüm üstüne oturur */ .about-flow { position: relative; } .about-flow::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(440px, 64%); height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--accent) 50%, var(--line-2) 70%, transparent); } .about-flow::after { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 9px; height: 9px; background: var(--gold-grad); box-shadow: 0 0 0 6px var(--bg), 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent); } /* Şampanya istatistik bandı — gradyan üst/alt sınır + derinlik */ .about-band { position: relative; border: none !important; background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--accent-soft) 75%, transparent), transparent 62%), linear-gradient(180deg, var(--surface-2), var(--bg-2)); box-shadow: inset 0 14px 30px -22px color-mix(in srgb, var(--accent-deep) 55%, transparent), inset 0 -14px 30px -22px color-mix(in srgb, var(--accent-deep) 45%, transparent); } .about-band::before, .about-band::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-2) 50%, var(--accent) 80%, transparent); opacity: .6; } .about-band::before { top: 0; } .about-band::after { bottom: 0; } /* banttaki istatistik kartlarına altın iç çizgi */ .about-band .stats { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: var(--shadow-md); } .about-band .stat { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(2px); } /* Aydınlık → koyu CTA geçişi: üstte yumuşak gradyan + altın hat + elmas */ .about-cta { position: relative; } .about-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), var(--accent-2), transparent); opacity: .8; z-index: 2; } .about-cta::after { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 12px; height: 12px; background: var(--gold-grad); z-index: 3; box-shadow: 0 0 0 7px var(--ink), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent); } /* koyu banda girişte yumuşak ışık huzmesi (mevcut radial ile uyumlu) */ #page-about .about-cta .container::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 90px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent); pointer-events: none; } /* Timeline'a dikey gradyan omurga */ #page-about .timeline { position: relative; padding-left: 4px; } @media (min-width: 761px) { #page-about .timeline::before { content: ''; position: absolute; left: 130px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 12%, var(--accent) 50%, var(--line-2) 88%, transparent); } #page-about .tl-item { position: relative; } #page-about .tl-item::before { content: ''; position: absolute; left: 130px; top: 38px; transform: translate(-50%, 0) rotate(45deg); width: 7px; height: 7px; background: var(--gold-grad); box-shadow: 0 0 0 4px var(--bg), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); } } /* ---------- İLETİŞİM SAYFASI ---------- */ .contact { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; } .field { display: flex; flex-direction: column; gap: 9px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select { font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; transition: border-color .2s, box-shadow .2s; } .field textarea { resize: vertical; min-height: 132px; } .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C7C63' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; } .kvkk { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin-top: 18px; line-height: 1.5; } .kvkk input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; } .form-ok { margin-top: 18px; font-size: 13.5px; color: var(--up); display: none; align-items: center; gap: 8px; } .form-ok.show { display: flex; } .form-ok::before { content: '✓'; font-weight: 700; } .contact-info { display: grid; gap: 26px; padding: clamp(28px,3vw,40px); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); position: relative; } .contact-info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-grad); border-radius: var(--r-md) var(--r-md) 0 0; } .cinfo { display: flex; gap: 16px; align-items: flex-start; } .cinfo__ic { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 50%; color: var(--accent); } .cinfo__ic svg { width: 21px; height: 21px; stroke-width: 1; } .cinfo b { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; } .cinfo span { color: var(--ink-2); font-size: 14px; line-height: 1.55; } .contact-social { display: flex; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); } .contact-social a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: all .25s; } .contact-social a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .contact-social svg { width: 18px; height: 18px; } .map-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .map-wrap iframe { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(.25) sepia(.12) contrast(.98); } .map-badge { position: absolute; top: 28px; left: 28px; z-index: 2; max-width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px 24px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: flex-start; } .map-badge b { font-family: var(--font-display); font-size: 21px; margin: 8px 0 6px; } .map-badge > span:last-of-type { font-size: 13.5px; color: var(--muted); line-height: 1.5; } @media (max-width: 760px) { .contact { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .map-wrap iframe { height: 340px; } .map-badge { position: static; max-width: none; border-radius: 0; border: none; border-bottom: 1px solid var(--line); box-shadow: none; } } /* ---------- FİYAT RAKAMLARI: düz, hizalı (lining tabular) ---------- Marcellus/serif old-style figürleri rakamları farklı yüksekliklere oturtuyordu; sayılar için temiz bir sans + lining + tabular figür. */ .price-card__val, .product-card__price, .pd__price .now, .pd__spec b, #hero-price, .cart-row.total span { font-family: 'Jost', system-ui, sans-serif; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: .005em; } .product-card__price small { font-family: 'Jost', system-ui, sans-serif; font-weight: 400; } /* ---------- GÜVEN ŞERİDİ: ortalı + sade & şık ikonlar ---------- */ .trust__item { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-block: 38px; } .trust__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 50%; color: var(--accent); position: relative; } .trust__icon::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); } .trust__icon svg { width: 25px; height: 25px; stroke-width: 1; } .trust__item b { font-size: 14px; } .trust__item span { font-size: 12.5px; } /* ---------- MARCELLUS okunaklılık ince ayarı ---------- */ [data-font="marcellus"] .lead { font-weight: 400; } [data-font="marcellus"] .product-card__name { letter-spacing: .01em; } [data-font="marcellus"] .display-xl { letter-spacing: .01em; } /* ---------- DEĞERLERİMİZ ikonları: zarif, ince & ortalı ---------- */ .value { text-align: center; } .value__icon { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 50%; position: relative; } .value__icon::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent); } .value__icon svg { display: block; width: 30px; height: 30px; stroke-width: 1; } .value h3 { margin-top: 26px; } .value p { margin-inline: auto; max-width: 34ch; } /* ---------- IMAGE-SLOT yükseklik düzeltmesi ---------- image-slot :host { height:160px } sabit; yalnızca aspect-ratio verilen slotlarda yükseklik 160px'de kalıyordu. height:auto ile aspect-ratio devreye girer. */ .editorial__media > image-slot, .founder__media image-slot, .about-hero__media image-slot, .pd__main image-slot { height: auto; display: block; } @media (prefers-reduced-motion: reduce) { .btn--gold::after, .product-card__media image-slot, .cat-card image-slot { transition: none; } } @media (max-width: 760px) { .hero__est { display: none; } .hero__copy::before { width: 240px; height: 240px; } } /* ============================================================ WORDPRESS UYUM KATMANI Claude Design custom element kullanır; WP'de bunun yerine /placeholder çıkıyor. Aşağıdaki kurallar onları aynı boyut/oranda gösterir. Ayrıca bazı template↔CSS köprüleri burada. ============================================================ */ /* Özel logo (Customizer → Logo) boyutu. !important: WooCommerce sayfalarında body.woocommerce img{height:auto} kuralı specificity ile bunu eziyordu (mağazada logo dev oluyordu). */ .brand .brand__logo, .site-header .brand__logo, .woocommerce .brand__logo { display: block !important; height: 48px !important; width: auto !important; max-width: 200px !important; object-fit: contain; } .footer .brand .brand__logo, .footer .brand__logo { height: 54px !important; max-width: 220px !important; } @media (max-width: 760px) { .brand .brand__logo, .site-header .brand__logo { height: 40px !important; } } /* Genel görsel sıfırlama */ .editorial__img, .founder__img, .cat-card__img { display: block; } /* Editorial medya (image-slot eşdeğeri: 5/6 oran) */ .editorial__media .editorial__img { width: 100%; aspect-ratio: 5/6; object-fit: cover; border-radius: var(--r-md); } /* Kurucu medya (4/5 oran) */ .founder__media .founder__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-md); } /* Kategori kartı görseli kartı tamamen doldurur */ .cat-card .cat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .cat-card.tall { grid-row: span 2; } /* Görsel yoksa placeholder — sıcak altın gradyan + ışıltı */ .ph { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-2) 100%); position: relative; overflow: hidden; } .ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(169,134,63,.18), transparent 62%); } /* Mobilde tall kart normal yüksekliğe döner */ @media (max-width: 760px) { .cat-card.tall { grid-row: auto; } } /* ---------- NAV MENÜ YATAY DİZİLİM ---------- wp_nav_menu