/* css/vitrin.css */ /* Vitrin Anasayfa teması (2026-10-24) — silva.com.tr düzeni, yumuşak yüzeyler. KİLİT: her seçici `.dtk-vt.dtk-vt` önekli (kit sayfalarının gömülü CSS'i tek sınıflı seçicileri eziyordu — hero-slider.md). Renkler site paletinden (--bronze/--ink, Ayarlar → Tema); yazı tipi sitenin kendi tipografisinden miras. tests/vitrin/02-css-kilit.php */ .dtk-vt.dtk-vt { --vt-accent: var(--bronze, var(--primary, #27408b)); --vt-ink: var(--ink, #172036); --vt-muted: color-mix(in srgb, var(--vt-ink) 64%, #fff); --vt-line: color-mix(in srgb, var(--vt-ink) 10%, transparent); --vt-soft: color-mix(in srgb, var(--vt-accent) 5%, #f6f7f9); --vt-soft-2: color-mix(in srgb, var(--vt-accent) 9%, #f3f4f7); --vt-surface: #fff; --vt-star: #e2a521; --vt-r-lg: 28px; --vt-r-md: 20px; --vt-r-sm: 14px; --vt-shadow: 0 1px 2px rgb(23 32 54 / .05), 0 10px 30px -14px rgb(23 32 54 / .16); --vt-shadow-hover: 0 2px 4px rgb(23 32 54 / .06), 0 24px 48px -20px rgb(23 32 54 / .28); --vt-ease: cubic-bezier(.2, .7, .2, 1); --vt-space: clamp(56px, 7vw, 104px); display: block; color: var(--vt-ink); line-height: 1.6; overflow-x: clip; } .dtk-vt.dtk-vt *, .dtk-vt.dtk-vt *::before, .dtk-vt.dtk-vt *::after { box-sizing: border-box; } .dtk-vt.dtk-vt img { display: block; max-width: 100%; height: auto; } .dtk-vt.dtk-vt a { color: inherit; text-decoration: none; } .dtk-vt.dtk-vt a:focus-visible, .dtk-vt.dtk-vt button:focus-visible, .dtk-vt.dtk-vt summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--vt-accent) 55%, transparent); outline-offset: 3px; border-radius: 10px; } /* ---- Bölüm iskeleti ---- */ .dtk-vt.dtk-vt .dtk-vt-sec { margin: 0; padding: var(--vt-space) 0; background: transparent; } .dtk-vt.dtk-vt .dtk-vt-sec--soft { background: var(--vt-soft); } .dtk-vt.dtk-vt .dtk-vt-sec--tight { padding-top: calc(var(--vt-space) * .5); } .dtk-vt.dtk-vt .dtk-vt-wrap { width: min(1240px, 100% - 32px); margin: 0 auto; padding: 0; } .dtk-vt.dtk-vt .dtk-vt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0; } .dtk-vt.dtk-vt .dtk-vt-head__text { max-width: 640px; } .dtk-vt.dtk-vt .dtk-vt-head--center { justify-content: center; text-align: center; } .dtk-vt.dtk-vt .dtk-vt-head--center .dtk-vt-head__text { margin: 0 auto; } .dtk-vt.dtk-vt .dtk-vt-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font-size: .9rem; font-weight: 600; letter-spacing: .01em; color: var(--vt-accent); } .dtk-vt.dtk-vt .dtk-vt-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; } .dtk-vt.dtk-vt .dtk-vt-head--center .dtk-vt-eyebrow::before { display: none; } .dtk-vt.dtk-vt .dtk-vt-title { margin: 0; padding: 0; font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.65rem); line-height: 1.12; font-weight: 650; letter-spacing: -.02em; color: var(--vt-ink); text-wrap: balance; } .dtk-vt.dtk-vt .dtk-vt-sub { margin: 12px 0 0; padding: 0; font-size: 1.02rem; color: var(--vt-muted); max-width: 56ch; } .dtk-vt.dtk-vt .dtk-vt-more { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--vt-line); font-weight: 600; font-size: .95rem; color: var(--vt-ink); background: var(--vt-surface); transition: border-color .2s var(--vt-ease), background-color .2s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-more:hover { border-color: color-mix(in srgb, var(--vt-accent) 40%, transparent); background: var(--vt-soft); } .dtk-vt.dtk-vt .dtk-vt-more i { font-size: .85em; transition: transform .2s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-more:hover i { transform: translateX(2px); } /* Düğmeler */ .dtk-vt.dtk-vt .dtk-vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 650; font-size: 1rem; line-height: 1.2; background: var(--vt-accent); color: #fff; transition: transform .2s var(--vt-ease), box-shadow .2s var(--vt-ease), background-color .2s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--vt-accent) 70%, transparent); } .dtk-vt.dtk-vt .dtk-vt-btn--light { background: #fff; color: var(--vt-accent); } .dtk-vt.dtk-vt .dtk-vt-btn--ghost { background: transparent; color: var(--vt-ink); border-color: var(--vt-line); } .dtk-vt.dtk-vt .dtk-vt-btn--ghost:hover { background: var(--vt-surface); } .dtk-vt.dtk-vt .dtk-vt-btn--wa { background: #15803d; color: #fff; } /* ---- H1 yedeği (hero boşken) ---- */ .dtk-vt.dtk-vt .dtk-vt-h1 { width: min(1240px, 100% - 32px); margin: 24px auto 0; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px); border-radius: var(--vt-r-lg); background: var(--vt-soft-2); text-align: center; } .dtk-vt.dtk-vt .dtk-vt-h1__title { margin: 0; padding: 0; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: var(--vt-ink); text-wrap: balance; } /* ---- Güven şeridi ---- */ .dtk-vt.dtk-vt .dtk-vt-trust { padding: 0; border-bottom: 1px solid var(--vt-line); background: var(--vt-surface); } .dtk-vt.dtk-vt .dtk-vt-trust__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); width: min(1240px, 100% - 32px); margin: 0 auto; padding: 0; list-style: none; } .dtk-vt.dtk-vt .dtk-vt-trust__item { display: flex; align-items: center; gap: 14px; margin: 0; padding: 22px 20px; font-size: .95rem; font-weight: 600; color: var(--vt-ink); } .dtk-vt.dtk-vt .dtk-vt-trust__item + .dtk-vt-trust__item { border-left: 1px solid var(--vt-line); } .dtk-vt.dtk-vt .dtk-vt-trust__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--vt-soft-2); color: var(--vt-accent); font-size: 1.1rem; } /* ---- Felsefe bandı ---- */ .dtk-vt.dtk-vt .dtk-vt-phil { text-align: center; } .dtk-vt.dtk-vt .dtk-vt-phil .dtk-vt-title { max-width: 22ch; margin: 0 auto; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); font-weight: 600; line-height: 1.16; } .dtk-vt.dtk-vt .dtk-vt-mark { color: var(--vt-accent); background: linear-gradient(transparent 70%, color-mix(in srgb, var(--vt-accent) 16%, transparent) 70%); padding: 0 .08em; border-radius: 4px; } .dtk-vt.dtk-vt .dtk-vt-phil__points { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 64px); margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; } .dtk-vt.dtk-vt .dtk-vt-phil__point { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0; max-width: 200px; } .dtk-vt.dtk-vt .dtk-vt-phil__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 0 6px; border-radius: 50%; border: 1px solid var(--vt-line); background: var(--vt-surface); color: var(--vt-accent); font-size: 1.25rem; } .dtk-vt.dtk-vt .dtk-vt-phil__point strong { font-size: 1rem; font-weight: 650; color: var(--vt-ink); } .dtk-vt.dtk-vt .dtk-vt-phil__point span { font-size: .9rem; color: var(--vt-muted); } /* ---- Yatay kaydırıcı (kategoriler, yorumlar, mobil raflar) ---- */ .dtk-vt.dtk-vt .dtk-vt-railbox { position: relative; } .dtk-vt.dtk-vt .dtk-vt-rail { display: grid; grid-auto-flow: column; grid-auto-columns: var(--vt-card, 260px); gap: 18px; margin: 0; padding: 4px 2px 18px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 2px; scrollbar-width: none; /* oklar + dokunmatik kaydırma; yarım görünen son kart devamı işaret eder */ } .dtk-vt.dtk-vt .dtk-vt-rail::-webkit-scrollbar { display: none; } .dtk-vt.dtk-vt .dtk-vt-rail > * { scroll-snap-align: start; } .dtk-vt.dtk-vt .dtk-vt-arrow { position: absolute; top: calc(50% - 32px); z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--vt-line); background: rgb(255 255 255 / .94); color: var(--vt-ink); font-size: 1.05rem; cursor: pointer; box-shadow: var(--vt-shadow); transition: opacity .2s var(--vt-ease), transform .2s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-arrow:hover { transform: scale(1.05); } .dtk-vt.dtk-vt .dtk-vt-arrow[disabled] { opacity: 0; pointer-events: none; } .dtk-vt.dtk-vt .dtk-vt-arrow--prev { left: -14px; } .dtk-vt.dtk-vt .dtk-vt-arrow--next { right: -14px; } .dtk-vt.dtk-vt .dtk-vt-arrow[hidden] { display: none; } /* ---- Kategori kartları ---- */ .dtk-vt.dtk-vt .dtk-vt-cats .dtk-vt-rail { --vt-card: clamp(220px, 23vw, 272px); } .dtk-vt.dtk-vt .dtk-vt-cat { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: var(--vt-r-md); background: var(--vt-soft-2); color: #fff; box-shadow: var(--vt-shadow); transition: box-shadow .3s var(--vt-ease), transform .3s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-cat:hover { box-shadow: var(--vt-shadow-hover); transform: translateY(-3px); } .dtk-vt.dtk-vt .dtk-vt-cat__media { position: absolute; inset: 0; z-index: -2; margin: 0; } .dtk-vt.dtk-vt .dtk-vt-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-cat:hover .dtk-vt-cat__media img { transform: scale(1.045); } .dtk-vt.dtk-vt .dtk-vt-cat__noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--vt-accent); font-size: 2rem; } .dtk-vt.dtk-vt .dtk-vt-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 16 32 / 0) 38%, rgb(10 16 32 / .72) 100%); } .dtk-vt.dtk-vt .dtk-vt-cat__count { position: absolute; top: 14px; left: 14px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--vt-ink); font-size: .8rem; font-weight: 650; backdrop-filter: blur(6px); } .dtk-vt.dtk-vt .dtk-vt-cat__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 16px; } .dtk-vt.dtk-vt .dtk-vt-cat__title { margin: 0; padding: 0; font-size: 1.15rem; line-height: 1.25; font-weight: 650; color: #fff; } .dtk-vt.dtk-vt .dtk-vt-cat__text { margin: 6px 0 0; padding: 0; font-size: .88rem; line-height: 1.45; color: rgb(255 255 255 / .86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dtk-vt.dtk-vt .dtk-vt-cat__go { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: .88rem; font-weight: 650; color: #fff; } .dtk-vt.dtk-vt .dtk-vt-cat__go i { transition: transform .2s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-cat:hover .dtk-vt-cat__go i { transform: translateX(3px); } /* ---- Ürün rafı (ortak shop-card işaretlemesi; mağaza CSS'i anasayfada yüklenmez → burada tam stil) ---- */ .dtk-vt.dtk-vt .dtk-vt-shelf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; } .dtk-vt.dtk-vt .dtk-card { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; overflow: hidden; border-radius: var(--vt-r-md); background: var(--vt-surface); border: 1px solid var(--vt-line); box-shadow: 0 1px 2px rgb(23 32 54 / .04); color: var(--vt-ink); transition: box-shadow .3s var(--vt-ease), transform .3s var(--vt-ease), border-color .3s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-card:hover { transform: translateY(-3px); box-shadow: var(--vt-shadow-hover); border-color: transparent; } .dtk-vt.dtk-vt .dtk-card__media { position: relative; aspect-ratio: 1 / 1; margin: 0; padding: 0; overflow: hidden; background: var(--vt-soft); } .dtk-vt.dtk-vt .dtk-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-card:hover .dtk-card__media img { transform: scale(1.04); } .dtk-vt.dtk-vt .dtk-card__noimg { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2rem; color: var(--vt-muted); } .dtk-vt.dtk-vt .dtk-card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .dtk-vt.dtk-vt .dtk-chip { display: inline-block; margin: 0; padding: 5px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.2; background: #fff; color: var(--vt-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); } .dtk-vt.dtk-vt .dtk-chip--sale { background: var(--vt-accent); color: #fff; } .dtk-vt.dtk-vt .dtk-chip--out { background: #334155; color: #fff; } .dtk-vt.dtk-vt .dtk-card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px 18px; } .dtk-vt.dtk-vt .dtk-card__title { margin: 0; padding: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; color: var(--vt-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dtk-vt.dtk-vt .dtk-card__rating { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; color: var(--vt-muted); } .dtk-vt.dtk-vt .dtk-card__rating .dtk-vt-stars { font-size: .78rem; } .dtk-vt.dtk-vt .dtk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 0 0; padding: 0; } .dtk-vt.dtk-vt .dtk-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; } .dtk-vt.dtk-vt .dtk-card__now { font-size: 1.12rem; font-weight: 700; color: var(--vt-accent); } .dtk-vt.dtk-vt .dtk-card__price del { font-size: .86rem; color: var(--vt-muted); } .dtk-vt.dtk-vt .dtk-card__ask { font-size: .92rem; font-weight: 650; color: var(--vt-accent); } .dtk-vt.dtk-vt .dtk-card__go { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--vt-soft-2); color: var(--vt-accent); transition: background-color .2s var(--vt-ease), color .2s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-card:hover .dtk-card__go { background: var(--vt-accent); color: #fff; } /* Yıldızlar */ .dtk-vt.dtk-vt .dtk-vt-stars { display: inline-flex; gap: 2px; color: var(--vt-star); } .dtk-vt.dtk-vt .dtk-vt-stars .is-empty { color: color-mix(in srgb, var(--vt-ink) 18%, transparent); } /* ---- Kampanya bandı (sayfanın vurgu anı) ---- */ .dtk-vt.dtk-vt .dtk-vt-promo__band { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; isolation: isolate; border-radius: var(--vt-r-lg); color: #fff; /* Metnin oturduğu sol/orta koyu kalır (vurgu yazısı her noktada okunur); açılma yalnız sağ uçta, görsel sütununun arkasında */ background: linear-gradient(120deg, color-mix(in srgb, var(--vt-accent) 72%, #000) 0%, color-mix(in srgb, var(--vt-accent) 86%, #000) 60%, color-mix(in srgb, var(--vt-accent) 94%, #000) 100%); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--vt-accent) 80%, transparent); } .dtk-vt.dtk-vt .dtk-vt-promo__band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 0% 110%, rgb(255 255 255 / .16) 0 30%, transparent 31%), radial-gradient(90% 60% at 10% 120%, rgb(255 255 255 / .10) 0 40%, transparent 41%), radial-gradient(60% 50% at 95% -10%, rgb(255 255 255 / .10) 0 45%, transparent 46%); } .dtk-vt.dtk-vt .dtk-vt-promo__text { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(32px, 5vw, 64px); } .dtk-vt.dtk-vt .dtk-vt-promo__text .dtk-vt-eyebrow { margin: 0; color: rgb(255 255 255 / .82); } .dtk-vt.dtk-vt .dtk-vt-promo__title { margin: 0; padding: 0; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; color: #fff; text-wrap: balance; } .dtk-vt.dtk-vt .dtk-vt-promo__accent { color: #ffe1a1; } .dtk-vt.dtk-vt .dtk-vt-promo__desc { margin: 0; padding: 0; max-width: 44ch; font-size: 1.02rem; color: rgb(255 255 255 / .86); } .dtk-vt.dtk-vt .dtk-vt-promo__text .dtk-vt-btn { align-self: flex-start; margin-top: 8px; } .dtk-vt.dtk-vt .dtk-vt-promo__media { position: relative; margin: 0; min-height: 280px; background: rgb(255 255 255 / .08); } .dtk-vt.dtk-vt .dtk-vt-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dtk-vt.dtk-vt .dtk-vt-promo__media img[src=""], .dtk-vt.dtk-vt .dtk-vt-promo__media img:not([src]) { display: none; } /* Görsel seçilmemişse (Builder yer tutucusu) boş kutu yerine bant tek sütun olur */ .dtk-vt.dtk-vt .dtk-vt-promo__band:has(.dtk-vt-promo__media img[src=""]), .dtk-vt.dtk-vt .dtk-vt-promo__band:has(.dtk-vt-promo__media img:not([src])) { grid-template-columns: 1fr; } .dtk-vt.dtk-vt .dtk-vt-promo__band:has(.dtk-vt-promo__media img[src=""]) .dtk-vt-promo__media, .dtk-vt.dtk-vt .dtk-vt-promo__band:has(.dtk-vt-promo__media img:not([src])) .dtk-vt-promo__media { display: none; } /* ---- Google yorumları ---- */ .dtk-vt.dtk-vt .dtk-vt-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin: 0 0 28px; padding: 22px clamp(20px, 3vw, 32px); border-radius: var(--vt-r-md); background: var(--vt-surface); border: 1px solid var(--vt-line); box-shadow: var(--vt-shadow); } .dtk-vt.dtk-vt .dtk-vt-rating__score { display: flex; align-items: center; gap: 18px; margin: 0; } .dtk-vt.dtk-vt .dtk-vt-rating__num { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--vt-ink); } .dtk-vt.dtk-vt .dtk-vt-rating__meta { display: flex; flex-direction: column; gap: 4px; } .dtk-vt.dtk-vt .dtk-vt-rating__meta .dtk-vt-stars { font-size: 1.05rem; } .dtk-vt.dtk-vt .dtk-vt-rating__count { margin: 0; font-size: .92rem; color: var(--vt-muted); } .dtk-vt.dtk-vt .dtk-vt-rating__src { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .dtk-vt.dtk-vt .dtk-vt-gmark { width: 20px; height: 20px; flex: none; } .dtk-vt.dtk-vt .dtk-vt-reviews .dtk-vt-rail { --vt-card: clamp(280px, 31vw, 392px); } .dtk-vt.dtk-vt .dtk-vt-review { display: flex; flex-direction: column; gap: 14px; height: 100%; margin: 0; padding: 24px; border-radius: var(--vt-r-md); background: var(--vt-surface); border: 1px solid var(--vt-line); } .dtk-vt.dtk-vt .dtk-vt-review__text { flex: 1; margin: 0; padding: 0; font-size: .98rem; line-height: 1.6; color: var(--vt-ink); quotes: "“" "”"; } .dtk-vt.dtk-vt .dtk-vt-review__text::before { content: open-quote; } .dtk-vt.dtk-vt .dtk-vt-review__text::after { content: close-quote; } .dtk-vt.dtk-vt .dtk-vt-review__who { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--vt-line); } .dtk-vt.dtk-vt .dtk-vt-review__avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--vt-soft-2); color: var(--vt-accent); font-weight: 700; } .dtk-vt.dtk-vt .dtk-vt-review__name { display: block; font-weight: 650; font-size: .95rem; color: var(--vt-ink); } .dtk-vt.dtk-vt .dtk-vt-review__src { display: block; font-size: .82rem; color: var(--vt-muted); } /* ---- Instagram ---- */ .dtk-vt.dtk-vt .dtk-vt-ig__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .dtk-vt.dtk-vt .dtk-vt-igpost { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--vt-r-sm); background: var(--vt-soft-2); } .dtk-vt.dtk-vt .dtk-vt-igpost img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-igpost:hover img { transform: scale(1.05); } .dtk-vt.dtk-vt .dtk-vt-igpost__type { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(10 16 32 / .55); color: #fff; font-size: .85rem; backdrop-filter: blur(4px); } .dtk-vt.dtk-vt .dtk-vt-igpost__cap { position: absolute; inset: auto 0 0 0; margin: 0; padding: 40px 14px 14px; font-size: .82rem; line-height: 1.4; color: #fff; background: linear-gradient(180deg, transparent, rgb(10 16 32 / .7)); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--vt-ease), transform .25s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-igpost:hover .dtk-vt-igpost__cap, .dtk-vt.dtk-vt .dtk-vt-igpost:focus-visible .dtk-vt-igpost__cap { opacity: 1; transform: none; } .dtk-vt.dtk-vt .dtk-vt-ig__more { display: flex; justify-content: center; margin: 28px 0 0; padding: 0; } .dtk-vt.dtk-vt .dtk-vt-ig__more .dtk-vt-more i { font-size: 1rem; } .dtk-vt.dtk-vt .dtk-vt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- SSS ---- */ .dtk-vt.dtk-vt .dtk-vt-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; } /* 8.87: SSS tek bileşen (FaqView, sekmeli iki sütun) — başlık üstte, liste tam genişlikte (önceden başlık solda yapışkan, liste sağ 7/12 sütunda). */ .dtk-vt.dtk-vt .dtk-vt-faq__layout .dtk-vt-head { position: static; display: block; margin: 0; } .dtk-vt.dtk-vt .dtk-vt-faq__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .dtk-vt.dtk-vt .dtk-vt-q { margin: 0; padding: 0; border-radius: var(--vt-r-sm); background: var(--vt-surface); border: 1px solid var(--vt-line); transition: box-shadow .25s var(--vt-ease), border-color .25s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-q[open] { border-color: transparent; box-shadow: var(--vt-shadow); } .dtk-vt.dtk-vt .dtk-vt-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 20px; list-style: none; cursor: pointer; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--vt-ink); } .dtk-vt.dtk-vt .dtk-vt-q summary::-webkit-details-marker { display: none; } .dtk-vt.dtk-vt .dtk-vt-q summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--vt-soft-2); color: var(--vt-accent); font-size: 1.15rem; font-weight: 500; line-height: 1; transition: transform .25s var(--vt-ease), background-color .25s var(--vt-ease); } .dtk-vt.dtk-vt .dtk-vt-q[open] summary::after { transform: rotate(45deg); background: var(--vt-accent); color: #fff; } .dtk-vt.dtk-vt .dtk-vt-a { margin: 0; padding: 0 20px 20px; font-size: .97rem; line-height: 1.7; color: var(--vt-muted); max-width: 68ch; } /* ---- Destek bandı ---- */ .dtk-vt.dtk-vt .dtk-vt-help__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); border-radius: var(--vt-r-lg); background: var(--vt-soft-2); } .dtk-vt.dtk-vt .dtk-vt-help__card > div:first-child { flex: 1 1 320px; min-width: 0; } .dtk-vt.dtk-vt .dtk-vt-help__card .dtk-vt-title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); } .dtk-vt.dtk-vt .dtk-vt-help__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; } /* Builder önizlemesi: boş bölüm notu (ziyaretçiye basılmaz) */ .dtk-vt.dtk-vt .dtk-vt-editnote { margin: 0; padding: 18px 20px; border-radius: var(--vt-r-sm); border: 1px dashed color-mix(in srgb, var(--vt-accent) 45%, transparent); background: var(--vt-soft); color: var(--vt-muted); font-size: .92rem; } /* ---- Duyarlı düzen ---- */ @media (max-width: 1024px) { .dtk-vt.dtk-vt .dtk-vt-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dtk-vt.dtk-vt .dtk-vt-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dtk-vt.dtk-vt .dtk-vt-ig__grid > :nth-child(n+7) { display: none; } .dtk-vt.dtk-vt .dtk-vt-faq__layout { grid-template-columns: 1fr; } .dtk-vt.dtk-vt .dtk-vt-faq__layout .dtk-vt-head { position: static; } } /* Kaydırma göstergesi (7.78): yalnız mobilde (oklar orada gizli); JS ekler, taşma yoksa hidden. */ .dtk-vt.dtk-vt .dtk-vt-progress { display: none; } @media (max-width: 760px) { .dtk-vt.dtk-vt .dtk-vt-head { flex-direction: column; align-items: flex-start; } .dtk-vt.dtk-vt .dtk-vt-arrow { display: none; } .dtk-vt.dtk-vt .dtk-vt-progress { display: block; position: relative; height: 3px; margin: 2px auto 0; width: min(46%, 180px); border-radius: 3px; background: var(--vt-line); overflow: hidden; } .dtk-vt.dtk-vt .dtk-vt-progress[hidden] { display: none; } .dtk-vt.dtk-vt .dtk-vt-progress > span { display: block; height: 100%; border-radius: 3px; background: var(--vt-accent); transition: transform .12s linear; } .dtk-vt.dtk-vt .dtk-vt-trust__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .dtk-vt.dtk-vt .dtk-vt-trust__item { flex: 0 0 auto; scroll-snap-align: start; padding: 16px 18px; } .dtk-vt.dtk-vt .dtk-vt-shelf__grid, .dtk-vt.dtk-vt .dtk-vt-ig__grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; overscroll-behavior-x: contain; } .dtk-vt.dtk-vt .dtk-vt-ig__grid { grid-auto-columns: 58%; } .dtk-vt.dtk-vt .dtk-vt-ig__grid > :nth-child(n+7) { display: block; } .dtk-vt.dtk-vt .dtk-vt-shelf__grid > *, .dtk-vt.dtk-vt .dtk-vt-ig__grid > * { scroll-snap-align: start; } .dtk-vt.dtk-vt .dtk-vt-cats .dtk-vt-rail { --vt-card: 68%; } .dtk-vt.dtk-vt .dtk-vt-reviews .dtk-vt-rail { --vt-card: 86%; } .dtk-vt.dtk-vt .dtk-vt-promo__band { grid-template-columns: 1fr; } .dtk-vt.dtk-vt .dtk-vt-promo__media { min-height: 220px; order: -1; } .dtk-vt.dtk-vt .dtk-vt-help__card { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .dtk-vt.dtk-vt *, .dtk-vt.dtk-vt *::before, .dtk-vt.dtk-vt *::after { transition-duration: .01ms; animation-duration: .01ms; scroll-behavior: auto; } .dtk-vt.dtk-vt .dtk-card:hover, .dtk-vt.dtk-vt .dtk-vt-cat:hover { transform: none; } } @media print { .dtk-vt.dtk-vt .dtk-vt-arrow { display: none; } } /* css/dtk-faq.css */ /* SSS GÖRÜNÜMÜ — tek bileşen (App\Services\FaqView, 8.87). Sekmeli iki sütun; iki sütun yalnız kutu ≥720 px ise (konteyner sorgusu). Renk sitenin vurgu renginden; seçili sekme açık zemin + vurgu çerçevesi (yazı koyu → vurgu rengi ne olursa olsun okunur). Tema kurallarını ezmemek/ezilmemek için her kural .dtk-faqv kapsamında; eski tema SSS sınıfları (dtk-vt-q, dh2-faq, block-faq-item…) artık basılmıyor. */ .dtk-faqv { --faqv-accent: var(--bronze, var(--primary, #1f6b4f)); --faqv-ink: #1b1f1d; --faqv-muted: #474e4a; --faqv-line: #e1e4e1; --faqv-soft: #f5f6f4; container-type: inline-size; margin: 0; padding: 0; text-align: left; } .dtk-faqv [hidden] { display: none !important; } .dtk-faqv .dtk-faqv__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--faqv-line); } .dtk-faqv .dtk-faqv__tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--faqv-line); border-radius: 999px; background: var(--faqv-soft); color: var(--faqv-ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; transition: border-color .2s ease, background-color .2s ease; } .dtk-faqv .dtk-faqv__tab:hover { border-color: color-mix(in srgb, var(--faqv-accent) 45%, var(--faqv-line)); } .dtk-faqv .dtk-faqv__tab[aria-pressed="true"] { background: color-mix(in srgb, var(--faqv-accent) 12%, #fff); border-color: var(--faqv-accent); } .dtk-faqv .dtk-faqv__n { font-weight: 500; color: #5b625e; } .dtk-faqv .dtk-faqv__tab:focus-visible, .dtk-faqv .dtk-faqv__q > summary:focus-visible { outline: 2px solid var(--faqv-accent); outline-offset: 2px; } .dtk-faqv .dtk-faqv__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; align-items: start; margin: 0; padding: 0; } @container (min-width: 720px) { .dtk-faqv .dtk-faqv__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dtk-faqv .dtk-faqv__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; } .dtk-faqv .dtk-faqv__q { margin: 0; padding: 0; border: 1px solid var(--faqv-line); border-radius: 10px; background: #fff; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; } .dtk-faqv .dtk-faqv__q:hover { border-color: color-mix(in srgb, var(--faqv-accent) 35%, var(--faqv-line)); } .dtk-faqv .dtk-faqv__q[open] { border-color: color-mix(in srgb, var(--faqv-accent) 40%, var(--faqv-line)); box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .35); } .dtk-faqv .dtk-faqv__q > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin: 0; padding: 14px 18px; list-style: none; cursor: pointer; background: none; border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--faqv-ink); } .dtk-faqv .dtk-faqv__q > summary::-webkit-details-marker { display: none; } .dtk-faqv .dtk-faqv__q > summary::marker { content: ""; } .dtk-faqv .dtk-faqv__q > summary::before, .dtk-faqv .dtk-faqv__q > summary::after { content: none; } .dtk-faqv .dtk-faqv__qt { min-width: 0; } .dtk-faqv .dtk-faqv__ic { flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0; border-right: 2px solid #5b625e; border-bottom: 2px solid #5b625e; transform: rotate(45deg); transition: transform .2s ease; } .dtk-faqv .dtk-faqv__q[open] .dtk-faqv__ic { transform: rotate(225deg); margin-top: 4px; } .dtk-faqv .dtk-faqv__a { margin: 0; padding: 0 18px 18px; font-size: 15px; line-height: 1.65; color: var(--faqv-muted); overflow-wrap: anywhere; } @media (max-width: 640px) { .dtk-faqv .dtk-faqv__tab { padding: 0 14px; font-size: 14px; } .dtk-faqv .dtk-faqv__q > summary { padding: 12px 14px; font-size: 15px; } .dtk-faqv .dtk-faqv__a { padding: 0 14px 16px; } } @media (prefers-reduced-motion: reduce) { .dtk-faqv .dtk-faqv__tab, .dtk-faqv .dtk-faqv__q, .dtk-faqv .dtk-faqv__ic { transition: none; } } /* css/dtk-doc-request.css */ /* Belge talebi penceresi (8.51, App\Services\Business\DocRequest). Renkler temadan (--ink / --surface / --bronze), yedekleri nötr. Masaüstü: ortada kart; ≤575 px: alttan açılan sayfa. Hareket yalnız açılışta, prefers-reduced-motion'da yok. */ .dtk-dr{--dr-ink:var(--ink,#14161a);--dr-bg:var(--surface,#fff);--dr-acc:var(--bronze,#a8693a); --dr-line:color-mix(in srgb,var(--dr-ink) 13%,transparent);--dr-soft:color-mix(in srgb,var(--dr-ink) 64%,transparent); --dr-tint:color-mix(in srgb,var(--dr-acc) 10%,var(--dr-bg)); width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:22px; background:var(--dr-bg);color:var(--dr-ink);box-shadow:0 30px 80px -24px rgba(10,12,16,.45),0 0 0 1px var(--dr-line); overflow:auto;overscroll-behavior:contain;font:inherit;line-height:1.5} .dtk-dr::backdrop{background:rgba(12,14,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .dtk-dr[open]{animation:dtkDrIn .32s cubic-bezier(.2,.8,.2,1)} @keyframes dtkDrIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} .dtk-dr__form{margin:0;padding:0 0 22px} .dtk-dr__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* Başlık: belgenin "künye fişi" — solda mühür, sağda kapat */ .dtk-dr__head{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:22px 22px 18px; background:linear-gradient(135deg,var(--dr-tint),var(--dr-bg) 70%);border-bottom:1px dashed var(--dr-line)} .dtk-dr__head::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:3px;border-radius:3px; background:linear-gradient(90deg,var(--dr-acc),transparent);opacity:.55} .dtk-dr__seal{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--dr-ink);color:var(--dr-bg);font-size:22px; box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--dr-bg) 18%,transparent)} .dtk-dr__eyebrow{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dr-acc)} .dtk-dr__title{margin:0;font-size:clamp(17px,2.4vw,20px);line-height:1.3;font-weight:700;color:inherit;overflow-wrap:anywhere} .dtk-dr__meta{margin:4px 0 0;font-size:13px;color:var(--dr-soft)} .dtk-dr__meta b{font-weight:600;color:var(--dr-ink)} .dtk-dr__close{display:grid;place-items:center;width:40px;height:40px;margin:-6px -6px 0 0;border:0;border-radius:12px;background:transparent;color:inherit;font-size:18px;cursor:pointer} .dtk-dr__close:hover{background:var(--dr-line)} .dtk-dr__lead{margin:16px 22px 14px;font-size:15px;color:var(--dr-soft)} .dtk-dr__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 22px} .dtk-dr__field{display:flex;flex-direction:column;gap:5px;margin:0;font-size:13px;font-weight:600} .dtk-dr__field b{color:var(--dr-acc);font-weight:700} .dtk-dr__field--full{grid-column:1/-1} .dtk-dr__field input,.dtk-dr__field textarea{font:inherit;font-size:15px;font-weight:400;width:100%;min-height:46px;padding:11px 14px;border-radius:12px; border:1px solid var(--dr-line);background:var(--dr-bg);color:inherit;box-sizing:border-box;transition:border-color .15s,box-shadow .15s} .dtk-dr__field textarea{min-height:88px;resize:vertical} .dtk-dr__field input:focus,.dtk-dr__field textarea:focus{outline:0;border-color:var(--dr-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--dr-acc) 18%,transparent)} .dtk-dr__field.is-invalid input,.dtk-dr__field.is-invalid textarea{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14)} .dtk-dr__foot{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;padding:18px 22px 0} .dtk-dr__note{margin:0;flex:1 1 220px;font-size:12.5px;color:var(--dr-soft)} .dtk-dr__submit{display:inline-flex;gap:10px;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:999px; background:var(--dr-ink);color:var(--dr-bg);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s} .dtk-dr__submit:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px var(--dr-ink)} .dtk-dr__submit[disabled]{opacity:.65;cursor:progress;transform:none} .dtk-dr__submit:focus-visible,.dtk-dr__close:focus-visible{outline:2px solid var(--dr-acc);outline-offset:2px} .dtk-dr__msg{margin:14px 22px 0;padding:12px 14px;border-radius:12px;font-size:14px} .dtk-dr__msg.is-ok{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7} .dtk-dr__msg.is-err{background:#fdecea;color:#611a15;border:1px solid #f5c6c2} .dtk-dr.is-sent .dtk-dr__grid,.dtk-dr.is-sent .dtk-dr__lead,.dtk-dr.is-sent .dtk-dr__foot{display:none} @media (max-width:575px){ .dtk-dr{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)} .dtk-dr[open]{animation-name:dtkDrUp} @keyframes dtkDrUp{from{transform:translateY(100%)}to{transform:none}} .dtk-dr__grid{grid-template-columns:1fr} .dtk-dr__submit{flex:1 1 100%} } @media (prefers-reduced-motion:reduce){.dtk-dr[open]{animation:none}.dtk-dr__submit,.dtk-dr__field input,.dtk-dr__field textarea{transition:none}.dtk-dr__submit:hover{transform:none}} /* css/site-search.css */ /* Header arama paneli — Faz F (2026-10-22). DESIGN.md jetonları; renk temadan (--bronze vurgu, --ink metin). Masaüstü: üstten inen tam genişlik panel; mobil (<640): tam ekran. Hareket 200–260 ms, reduced-motion'da yok. */ .dtk-header-search { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: inherit; text-decoration: none; transition: background .16s, color .16s; margin-left: 4px; /* 8.90: