/* Deevans — anasayfa bölümleri, kategori kutuları, ayrıcalıklar, showroom. */

/* Açılış slaytı */
.dv-hero { position: relative; margin: 25px 25px 0; height: min(765px, calc(100svh - 50px)); min-height: 520px; border-radius: var(--dv-r-lg); overflow: hidden; background: var(--dv-brand-3); isolation: isolate; }
.dv-hero__track, .dv-hero__slide { position: absolute; inset: 0; }
.dv-hero__slide { opacity: 0; visibility: hidden; transition: opacity .9s var(--dv-ease), visibility 0s .9s; }
.dv-hero__slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s var(--dv-ease); }
.dv-hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.dv-hero__slide.is-on .dv-hero__img { transform: scale(1); }
.dv-hero::before, .dv-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dv-hero::before { background: linear-gradient(180deg, rgba(20, 14, 10, .5), transparent 32%); }
.dv-hero::after { background: linear-gradient(0deg, rgba(20, 14, 10, .55), transparent 45%); }
.dv-hero__copy { position: absolute; z-index: 3; left: clamp(28px, 5vw, 72px); bottom: 64px; max-width: 560px; color: #fff; display: grid; gap: 14px; justify-items: start; }
.dv-hero__title { color: #fff; font-size: clamp(32px, 4.4vw, 60px); font-weight: 300; line-height: 1.08; letter-spacing: -.03em; }
.dv-hero__copy p { font-size: 16px; font-weight: 300; opacity: .92; max-width: 440px; }
.dv-hero__copy .dv-pill { margin-top: 8px; }
.dv-hero__slide.is-on .dv-hero__copy > * { animation: dv-rise .9s var(--dv-ease) both; }
.dv-hero__slide.is-on .dv-hero__copy > :nth-child(2) { animation-delay: .1s; }
.dv-hero__slide.is-on .dv-hero__copy > :nth-child(3) { animation-delay: .2s; }
.dv-hero__slide.is-on .dv-hero__copy > :nth-child(4) { animation-delay: .3s; }
@keyframes dv-rise { from { opacity: 0; transform: translateY(18px); } }
.dv-hero__frame { position: absolute; inset: 18px; z-index: 2; border: 1px solid rgba(255, 255, 255, .32); border-radius: 16px; pointer-events: none; }
.dv-hero__ctrl {
	position: absolute; z-index: 3; right: 44px; bottom: 44px; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 22px;
	border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff;
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.dv-hero__count { font-size: 13px; letter-spacing: .08em; opacity: .85; white-space: nowrap; }
.dv-hero__count strong { font-weight: 600; }
.dv-hero__dots { display: flex; gap: 4px; }
.dv-hero__dots button { width: 34px; height: 20px; display: grid; align-items: center; }
.dv-hero__dots i { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.dv-hero__dots i::after { content: ""; display: block; height: 100%; width: 0; background: #fff; }
.dv-hero__dots [aria-selected="true"] i::after { animation: dv-progress var(--dv-hero-delay, 6s) linear forwards; }
.dv-hero.is-paused .dv-hero__dots [aria-selected="true"] i::after { animation-play-state: paused; }
.dv-hero__nav { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--dv-brand); transition: background var(--dv-fast), color var(--dv-fast); }
.dv-hero__nav + .dv-hero__nav { margin-left: -6px; }
.dv-hero__nav:hover { background: var(--dv-brand); color: #fff; }
@keyframes dv-progress { to { width: 100%; } }

/* Kategori kapsülleri */
.dv-cats { --per: 5; }
.dv-cat {
	display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px 0 8px;
	border-radius: 999px; background: var(--dv-greige); font-size: 14px; font-weight: 500; color: var(--dv-ink); white-space: nowrap;
	transition: background var(--dv-fast), color var(--dv-fast);
}
.dv-cat .dv-ico { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; color: var(--dv-brand); transition: background var(--dv-fast), color var(--dv-fast); }
.dv-cat:hover { background: var(--dv-brand); color: #fff; }
.dv-cat:hover .dv-ico { background: rgba(255, 255, 255, .14); color: #fff; }

/* Marka kartı */
.dv-promo {
	position: relative; height: 100%; min-height: 430px; padding: 40px 32px 32px; border: 1px solid var(--dv-line); border-radius: var(--dv-r);
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; overflow: hidden;
	background: var(--dv-greige); border-color: transparent;
}
.dv-promo__logo { width: 210px; margin-bottom: 26px; }
.dv-promo__kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dv-accent); }
.dv-promo__title { font-size: 28px; font-weight: 500; line-height: 1.2; color: var(--dv-brand); }
.dv-promo__text { color: var(--dv-muted); max-width: 300px; }
.dv-promo__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: auto; padding-top: 20px; }

/* Yaşam alanı kartları */
.dv-spaces { --per: var(--cols, 4); }
.dv-tile { position: relative; display: block; aspect-ratio: 31 / 40; border-radius: var(--dv-r); overflow: hidden; background: var(--dv-soft-2); }
.dv-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--dv-ease); }
.dv-tile:hover img { transform: scale(1.05); }
.dv-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 14, 10, .6), transparent 45%); }
.dv-tile::before { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; pointer-events: none; transition: inset var(--dv-normal) var(--dv-ease); }
.dv-tile:hover::before { inset: 18px; }
.dv-tile__no { position: absolute; z-index: 1; top: 28px; left: 30px; color: #fff; font-size: 13px; letter-spacing: .14em; opacity: .85; }
.dv-tile__text { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 30px; display: grid; gap: 2px; color: #fff; }
.dv-tile__text strong { font-size: 20px; font-weight: 500; }
.dv-tile__text small { font-size: 14px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grej bant (kumaşlar) */
.dv-band { padding: 80px 0; margin-block: 72px; background: var(--dv-greige); }
.dv-band--greige { position: relative; overflow: hidden; }
.dv-band--greige::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; width: min(100% - 40px, 1380px); translate: -50% 0; border: 1px solid rgba(143, 125, 111, .35); border-radius: 28px; pointer-events: none; }
.dv-band--greige .dv-wrap { position: relative; }
.dv-fabrics { --per: 3; gap: 24px; }
.dv-fabric { position: relative; margin: 0; aspect-ratio: 426 / 538; border-radius: 999px 999px var(--dv-r) var(--dv-r); overflow: hidden; }
.dv-fabric img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--dv-ease); }
.dv-fabric:hover img { transform: scale(1.06); }
.dv-fabric figcaption {
	position: absolute; left: 50%; bottom: 22px; translate: -50% 0; padding: 10px 24px; border-radius: 999px;
	background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); color: var(--dv-ink); font-size: 15px; font-weight: 500; white-space: nowrap;
}

/* Öne çıkan ürün */
.dv-feature { display: grid; grid-template-columns: 1.55fr 1fr; gap: 70px; align-items: center; }
.dv-feature__media { position: relative; padding: 0 14% 0 12px; isolation: isolate; }
.dv-feature__media::before { content: ""; position: absolute; z-index: -1; left: -14px; top: -22px; width: calc(86% - 4px); bottom: 28px; border: 1px solid var(--dv-greige-2); border-radius: var(--dv-r); }
.dv-feature__main { width: 100%; aspect-ratio: 628 / 428; object-fit: cover; border-radius: var(--dv-r); }
.dv-feature__inset {
	position: absolute; right: 0; top: 18%; width: 38%; aspect-ratio: 266 / 278; object-fit: cover;
	border-radius: var(--dv-r); border: 2px solid #fff; box-shadow: var(--dv-shadow-lg);
}
.dv-feature__copy { display: grid; gap: 22px; justify-items: start; }
.dv-feature__title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.dv-feature__title span { display: block; font-weight: 300; }
.dv-feature__copy p { color: var(--dv-muted); font-size: 14px; line-height: 1.75; }
.dv-feature__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Bento */
.dv-bento { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 310px 505px; gap: 20px; }
.dv-bento__item { position: relative; display: block; border-radius: var(--dv-r); overflow: hidden; background: var(--dv-soft-2); }
.dv-bento__item.is-big { grid-row: 1 / 3; }
.dv-bento__item.is-wide { grid-column: 2 / 4; }
.dv-bento__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--dv-ease); }
.dv-bento__item:hover img { transform: scale(1.04); }
.dv-bento__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 14, 10, .62), transparent 50%); }
.dv-bento__item.is-small::after { background: linear-gradient(0deg, rgba(20, 14, 10, .5), transparent 40%); }
.dv-bento__text { position: absolute; z-index: 1; left: 40px; right: 40px; bottom: 38px; display: grid; gap: 10px; color: #fff; }
.dv-bento__item.is-small .dv-bento__text { left: 24px; bottom: 26px; }
.dv-bento__text strong { font-size: 24px; font-weight: 300; letter-spacing: -.01em; }
.dv-bento__text small { font-size: 15px; line-height: 1.6; opacity: .92; max-width: 520px; }
.dv-bento__no { position: absolute; z-index: 1; top: 26px; left: 30px; color: #fff; font-size: 13px; letter-spacing: .14em; opacity: .85; }
.dv-bento__go {
	position: absolute; z-index: 1; top: 18px; right: 18px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
	background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(8px);
	transition: background var(--dv-fast), color var(--dv-fast), transform var(--dv-normal) var(--dv-ease);
}
.dv-bento__item:hover .dv-bento__go { background: #fff; color: var(--dv-brand); transform: rotate(45deg); }

/* Blog kartı */
.dv-post { display: flex; flex-direction: column; border: 1px solid var(--dv-line); border-radius: var(--dv-r); overflow: hidden; background: #fff; }
.dv-post__media { display: block; aspect-ratio: 418 / 250; background: var(--dv-soft-2); overflow: hidden; }
.dv-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dv-ease); }
.dv-post:hover .dv-post__media img { transform: scale(1.04); }
.dv-post__body { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; align-items: flex-start; }
.dv-post__body time { font-size: 13px; color: var(--dv-faint); }
.dv-post__body :is(h2, h3) { font-size: 16px; font-weight: 500; line-height: 1.45; }
.dv-post__body p { font-size: 13px; color: var(--dv-faint); }
.dv-post__body .dv-pill { margin-top: auto; min-height: 44px; font-weight: 400; }

/* Ayrıcalıklar: footer üstünde yatay şerit */
.dv-perks { margin-top: 72px; border-block: 1px solid var(--dv-line); background: var(--dv-soft); }
.dv-perks__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dv-perk { display: flex; align-items: center; gap: 16px; padding: 30px 26px; }
.dv-perk + .dv-perk { border-left: 1px solid var(--dv-line); }
.dv-perk:first-child { padding-left: 0; }
.dv-perk__icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--dv-greige); color: var(--dv-brand); transition: background var(--dv-fast), color var(--dv-fast); }
.dv-perk:hover .dv-perk__icon { background: var(--dv-brand); color: #fff; }
.dv-perk__text { display: grid; gap: 2px; line-height: 1.45; }
.dv-perk__text strong { font-size: 14px; font-weight: 500; color: var(--dv-ink); }
.dv-perk__text small { font-size: 12px; color: var(--dv-muted); }

/* Showroom kartı + hakkımızda */
.dv-showroom { display: grid; grid-template-columns: 1fr 400px; gap: 20px; }
.dv-showroom__card { position: relative; min-height: 512px; border-radius: var(--dv-r); overflow: hidden; background: var(--dv-brand); color: #fff; isolation: isolate; }
.dv-showroom__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.dv-showroom__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 40%, rgba(42, 32, 27, .35)); }
.dv-showroom__copy {
	margin: 24px 24px 24px auto; width: min(100% - 48px, 430px); padding: 44px 38px; display: grid; gap: 18px; justify-items: start;
	border: 1px solid rgba(255, 255, 255, .35); border-radius: 18px; background: rgba(42, 32, 27, .45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dv-showroom__copy h2 { color: #fff; font-size: 26px; font-weight: 300; line-height: 1.2; }
.dv-showroom__copy p { font-size: 15px; line-height: 1.75; opacity: .92; }
.dv-showroom__addr { display: flex; gap: 10px; font-size: 14px !important; }
.dv-showroom__copy .dv-pill { margin-top: 18px; }
.dv-showroom__about { background: var(--dv-soft); border: 1px solid var(--dv-line); border-radius: var(--dv-r); padding: 30px; display: flex; flex-direction: column; gap: 18px; max-height: 512px; overflow: hidden; }
.dv-showroom__about h2 { font-size: 15px; font-weight: 600; line-height: 1.6; padding-inline: 24px; }
.dv-showroom__text { padding-inline: 24px; overflow: auto; font-size: 13px; line-height: 1.85; color: var(--dv-muted); scrollbar-width: thin; }
.dv-showroom__text p + p { margin-top: 12px; }
.dv-mini { position: relative; display: flex; gap: 16px; align-items: center; padding: 10px; padding-right: 56px; border: 1px solid var(--dv-line); border-radius: 14px; background: var(--dv-soft); overflow: hidden; }
.dv-mini img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.dv-mini > span { display: grid; gap: 4px; }
.dv-mini strong { color: var(--dv-accent); font-size: 15px; font-weight: 600; }
.dv-mini small { color: var(--dv-muted); font-size: 13px; line-height: 1.5; }
.dv-mini i { position: absolute; top: 0; right: 0; width: 56px; height: 48px; display: grid; place-items: center; background: var(--dv-brand); color: #fff; border-radius: 0 0 0 28px; transition: background var(--dv-fast); }
.dv-mini:hover i { background: var(--dv-accent); }

/* Kategori bento kutuları (liste sayfası) */
.dv-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.dv-tiles__item { position: relative; display: block; height: 300px; border-radius: var(--dv-r); overflow: hidden; background: var(--dv-soft-2); grid-column: span 2; }
.dv-tiles__item.is-wide { grid-column: span 4; }
.dv-tiles__item.is-full { grid-column: 1 / -1; height: 340px; }
.dv-tiles__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--dv-ease); }
.dv-tiles__item:hover img { transform: scale(1.04); }
.dv-tiles__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 14, 10, .55), transparent 40%); }
.dv-tiles__item::before { content: ""; position: absolute; inset: 12px; z-index: 1; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; pointer-events: none; }
.dv-tiles__item span { position: absolute; z-index: 1; left: 30px; bottom: 28px; color: #fff; font-size: 22px; font-weight: 300; }
.dv-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

@media (max-width: 1100px) {
	.dv-perks__list { grid-template-columns: 1fr 1fr; }
	.dv-perk:nth-child(3) { border-left: 0; padding-left: 0; }
	.dv-cats { --per: 4.3; }
	.dv-spaces { --per: 2.6; }
	.dv-fabrics { --per: 2.3; }
	.dv-feature { gap: 40px; }
	.dv-bento { grid-template-rows: 260px 400px; }
	.dv-showroom { grid-template-columns: 1fr; }
	.dv-showroom__about { max-height: none; }
}
@media (max-width: 860px) {
	.dv-feature { grid-template-columns: 1fr; }
	.dv-bento { grid-template-columns: 1fr 1fr; grid-template-rows: 420px 220px 300px; }
	.dv-bento__item.is-big { grid-column: 1 / 3; grid-row: auto; }
	.dv-bento__item.is-wide { grid-column: 1 / 3; }
	.dv-tiles { grid-template-columns: 1fr 1fr; }
	.dv-tiles__item, .dv-tiles__item.is-wide { grid-column: span 1; height: 220px; }
	.dv-tiles__item.is-full { grid-column: 1 / -1; }
	.dv-tiles__item:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
	.dv-hero { margin: 10px 10px 0; height: 78svh; min-height: 480px; border-radius: var(--dv-r); }
	.dv-hero__frame { inset: 10px; border-radius: 12px; }
	.dv-hero__ctrl { right: 50%; translate: 50% 0; bottom: 22px; padding: 6px 6px 6px 16px; gap: 10px; }
	.dv-hero__dots button { width: 22px; }
	.dv-hero__nav { width: 36px; height: 36px; }
	.dv-hero__copy { bottom: 92px; right: 28px; }
	.dv-showroom__copy { margin: 0; width: 100%; border-radius: 0; border: 0; }
	.dv-cats { --per: 2.4; }
	.dv-spaces { --per: 1.5; }
	.dv-fabrics { --per: 1.4; }
	.dv-promo { min-height: 400px; }
	.dv-band { padding: 48px 0; margin-block: 48px; }
	.dv-feature__media { padding: 0 18% 0 0; }
	.dv-bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 260px; }
	.dv-bento__item.is-big, .dv-bento__item.is-wide { grid-column: auto; }
	.dv-bento__item.is-big { grid-row: span 1; height: 360px; }
	.dv-bento__text { left: 22px; right: 22px; bottom: 22px; }
	.dv-bento__text strong { font-size: 19px; }
	.dv-perks__list { grid-template-columns: 1fr; }
	.dv-perk, .dv-perk:first-child { padding: 18px 0; }
	.dv-perk + .dv-perk { border-left: 0; border-top: 1px solid var(--dv-line); }
	.dv-showroom__card { min-height: 0; }
	.dv-showroom__card::before { background: linear-gradient(0deg, rgba(42, 32, 27, .95) 45%, rgba(42, 32, 27, .2)); }
	.dv-showroom__copy { padding: 220px 24px 28px; width: 100%; }
	.dv-showroom__about { padding: 18px; }
	.dv-showroom__about h2, .dv-showroom__text { padding-inline: 4px; }
}
