/* ════════════════════════════════════════════════════════════
   DOĞANCI — Ürünler / Kategori / Ürün Detay
   Premium · Minimalist · Scroll-trigger
   ════════════════════════════════════════════════════════════ */

:root {
    --u-espresso: #2B2018;
    --u-bark:     #31261D;
    --u-taupe:    #AD9677;
    --u-sand:     #C4A882;
    --u-linen:    #F4F1EB;
    --u-cream:    #ECEBE3;
    --u-paper:    #FBFAF7;
    --u-line:     rgba(43,32,24,0.10);
    --u-ease:     cubic-bezier(.22,1,.36,1);
}

.u-wrap { overflow: clip; }
.u-section { position: relative; }
.u-container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px){ .u-container { padding: 0 22px; } }

/* ── Eyebrow / titles ─────────────────────────────── */
.u-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--primary-font); font-size: 11px; font-weight: 600;
    letter-spacing: .32em; text-transform: uppercase; color: var(--u-taupe);
}
.u-eyebrow::before { content:""; width: 34px; height: 1px; background: var(--u-taupe); opacity:.7; }
.u-eyebrow.center::after { content:""; width: 34px; height: 1px; background: var(--u-taupe); opacity:.7; }
.u-display {
    font-family: var(--alt-font); font-weight: 500; color: var(--u-bark);
    line-height: 1.04; letter-spacing: -0.02em;
    font-size: clamp(2.1rem, 5vw, 4rem);
}
.u-lead { font-size: clamp(1rem,1.3vw,1.18rem); line-height: 1.85; color: var(--medium-gray); max-width: 56ch; }

/* ── Scroll reveal (progressive enhancement: hidden only when JS active) ── */
.u-reveal { transition: opacity 1.05s var(--u-ease), transform 1.05s var(--u-ease); transition-delay: var(--d, 0s); }
.u-reveal-img { transition: clip-path 1.25s var(--u-ease); transition-delay: var(--d,0s); }
.u-js .u-reveal { opacity: 0; transform: translateY(38px); will-change: transform, opacity; }
.u-js .u-reveal.is-in { opacity: 1; transform: none; }
.u-js .u-reveal-img { clip-path: inset(0 0 100% 0); }
.u-js .u-reveal-img.is-in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){ .u-reveal,.u-reveal-img{opacity:1!important;transform:none!important;clip-path:none!important;} }

/* ════════ HERO ════════ */
.u-hero { position: relative; height: 88vh; min-height: 560px; max-height: 900px; overflow: hidden; background: var(--u-espresso); }
.u-hero__media { position: absolute; inset: -8% 0; }
.u-hero__media img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.u-hero__veil { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(20,14,9,.45) 0%, rgba(20,14,9,.18) 38%, rgba(20,14,9,.72) 100%); }
.u-hero__inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px,8vh,96px); }
.u-hero .u-eyebrow { color: var(--u-sand); }
.u-hero .u-eyebrow::before { background: var(--u-sand); }
.u-hero__title { font-family: var(--alt-font); color: #fff; font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; font-size: clamp(2.6rem, 7vw, 6rem); margin: 22px 0 0; }
.u-hero__sub { color: rgba(255,255,255,.82); max-width: 50ch; margin-top: 20px; font-size: clamp(1rem,1.25vw,1.15rem); line-height: 1.8; }
.u-hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(255,255,255,.7); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.u-hero__scroll span.line { width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: uScroll 2.2s var(--u-ease) infinite; }
@keyframes uScroll { 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ════════ BREADCRUMB ════════ */
.u-crumb { font-family: var(--primary-font); font-size: 12.5px; letter-spacing: .04em; color: var(--medium-gray); padding: 26px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.u-crumb a { color: var(--medium-gray); text-decoration: none; transition: color .25s; }
.u-crumb a:hover { color: var(--u-taupe); }
.u-crumb .sep { opacity:.4; }
.u-crumb .cur { color: var(--u-bark); font-weight: 600; }

/* ════════ INTRO (landing) ════════ */
.u-intro { padding: clamp(80px,11vw,150px) 0 clamp(40px,6vw,70px); }
.u-intro__grid { display:grid; grid-template-columns: 1fr; gap: 30px; }
@media(min-width:992px){ .u-intro__grid{ grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; } }
.u-stats { display:flex; gap: clamp(28px,5vw,64px); margin-top: 8px; }
.u-stat__n { font-family: var(--alt-font); font-size: clamp(2.2rem,3.4vw,3.1rem); color: var(--u-bark); line-height:1; }
.u-stat__l { font-family: var(--primary-font); font-size: 12px; letter-spacing:.12em; text-transform:uppercase; color: var(--u-taupe); margin-top: 8px; }

/* ════════ CATEGORY GRID ════════ */
.u-cats { padding: clamp(30px,5vw,60px) 0 clamp(80px,11vw,140px); }
.u-cat-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media(min-width:680px){ .u-cat-grid{ grid-template-columns: repeat(2,1fr); gap: 22px; } }
@media(min-width:1040px){ .u-cat-grid{ grid-template-columns: repeat(6,1fr); grid-auto-rows: 240px; } }
.u-cat { position: relative; overflow: hidden; border-radius: 4px; display:block; text-decoration:none; background: var(--u-espresso); aspect-ratio: 4/3; }
@media(min-width:680px) and (max-width:1039px){
    .u-cat--xl, .u-cat--lg { grid-column: span 2; aspect-ratio: 16/10; }
}
@media(min-width:1040px){
    .u-cat { aspect-ratio: auto; }
    .u-cat--xl { grid-column: span 4; grid-row: span 2; }
    .u-cat--lg { grid-column: span 2; grid-row: span 2; }
    .u-cat--md { grid-column: span 2; grid-row: span 1; }
    .u-cat--sm { grid-column: span 2; grid-row: span 1; }
    .u-cat--w3 { grid-column: span 3; grid-row: span 1; }
}
.u-cat img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transition: transform 1.3s var(--u-ease), filter 1.3s var(--u-ease); filter: brightness(.82) saturate(1.02); }
.u-cat::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,14,9,0) 30%, rgba(20,14,9,.82) 100%); transition: opacity .5s; }
.u-cat:hover img { transform: scale(1.07); filter: brightness(.7); }
.u-cat__body { position:absolute; z-index:2; left:0; right:0; bottom:0; padding: 26px; }
.u-cat__count { font-family: var(--primary-font); font-size: 10.5px; letter-spacing:.22em; text-transform:uppercase; color: var(--u-sand); display:block; margin-bottom: 9px; }
.u-cat__name { font-family: var(--alt-font); color:#fff; font-size: clamp(1.25rem,1.7vw,1.7rem); line-height:1.12; }
.u-cat__name.big { font-size: clamp(1.9rem,2.8vw,2.7rem); }
.u-cat__go { margin-top: 14px; display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.85); font-family:var(--primary-font); font-size:12px; letter-spacing:.14em; text-transform:uppercase; transform: translateY(8px); opacity:0; transition: .5s var(--u-ease); }
.u-cat:hover .u-cat__go { transform:none; opacity:1; }
.u-cat__go .ln { width:26px; height:1px; background: var(--u-sand); display:inline-block; transition: width .4s; }
.u-cat:hover .u-cat__go .ln { width: 40px; }

/* ════════ PRODUCT (door) GRID ════════ */
.u-prod-head { padding: clamp(60px,8vw,96px) 0 26px; }
.u-filter { display:flex; flex-wrap:wrap; gap: 10px; padding: 8px 0 0; border-top: 1px solid var(--u-line); margin-top: 30px; padding-top: 26px; }
.u-chip { font-family: var(--primary-font); font-size: 12px; letter-spacing:.04em; padding: 9px 20px; border-radius: 40px; border: 1px solid var(--u-line); background: transparent; color: var(--medium-gray); cursor: pointer; transition: .3s var(--u-ease); }
.u-chip:hover { border-color: var(--u-taupe); color: var(--u-bark); }
.u-chip.active { background: var(--u-bark); border-color: var(--u-bark); color: #fff; }
.u-count-live { font-family: var(--primary-font); font-size: 12px; color: var(--u-taupe); letter-spacing:.06em; margin-left:auto; align-self:center; }

.u-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; padding: 30px 0 clamp(80px,11vw,140px); }
@media(min-width:600px){ .u-grid{ grid-template-columns: repeat(3,1fr); gap: 20px; } }
@media(min-width:980px){ .u-grid{ grid-template-columns: repeat(4,1fr); gap: 24px; } }
.u-card { display:block; text-decoration:none; }
.u-card__media { position: relative; overflow: hidden; border-radius: 4px; background: var(--u-cream); aspect-ratio: 1000/1320; }
.u-card__media img { width:100%; height:100%; object-fit: cover; transition: transform 1.1s var(--u-ease); }
.u-card:hover .u-card__media img { transform: scale(1.045); }
.u-card__chip { position:absolute; top: 14px; left: 14px; z-index:2; background: rgba(251,250,247,.92); backdrop-filter: blur(4px); color: var(--u-bark); font-family:var(--primary-font); font-size: 10px; letter-spacing:.1em; text-transform:uppercase; padding: 6px 12px; border-radius: 30px; }
.u-card__view { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .45s; }
.u-card__view span { background: rgba(43,32,24,.86); color:#fff; font-family:var(--primary-font); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding: 12px 24px; border-radius: 40px; transform: translateY(10px); transition: transform .5s var(--u-ease); }
.u-card:hover .u-card__view { opacity:1; }
.u-card:hover .u-card__view span { transform:none; }
.u-card__meta { padding: 16px 2px 0; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.u-card__code { font-family: var(--alt-font); font-size: 1.12rem; color: var(--u-bark); letter-spacing: 0; }
.u-card__mat { font-family: var(--primary-font); font-size: 11px; letter-spacing:.06em; color: var(--u-taupe); text-transform: uppercase; }

/* ════════ DETAIL ════════ */
.u-detail { padding: clamp(40px,5vw,60px) 0 clamp(70px,9vw,120px); }
.u-detail__grid { display:grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width:992px){ .u-detail__grid{ grid-template-columns: 1.02fr 1fr; gap: 70px; align-items:start; } }
.u-detail__media { position: relative; }
@media(min-width:992px){ .u-detail__media{ position: sticky; top: 100px; } }
.u-detail__media .frame { border-radius: 6px; overflow:hidden; background: var(--u-cream); aspect-ratio: 1000/1320; }
.u-detail__media img { width:100%; height:100%; object-fit: cover; }
.u-detail__kicker { font-family:var(--primary-font); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color: var(--u-taupe); }
.u-detail__title { font-family: var(--alt-font); font-weight:500; color: var(--u-bark); font-size: clamp(2.2rem,4vw,3.4rem); line-height:1.04; margin: 16px 0 0; }
.u-detail__mat { display:inline-block; margin-top: 18px; background: var(--u-cream); color: var(--u-bark); font-family:var(--primary-font); font-size:12px; letter-spacing:.08em; padding: 8px 18px; border-radius: 30px; }
.u-detail__body { margin-top: 26px; color: var(--medium-gray); font-size: 1.02rem; line-height: 1.85; }
.u-detail__body p { margin: 0 0 16px; }
.u-specs { margin-top: 30px; border-top:1px solid var(--u-line); }
.u-spec { display:flex; justify-content:space-between; gap:20px; padding: 15px 0; border-bottom: 1px solid var(--u-line); }
.u-spec dt { font-family:var(--primary-font); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--u-taupe); }
.u-spec dd { margin:0; font-family:var(--alt-font); color: var(--u-bark); font-size: 1.05rem; }
.u-cta-row { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 34px; }
.u-btn { display:inline-flex; align-items:center; gap:12px; font-family:var(--primary-font); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; padding: 16px 30px; border-radius: 44px; text-decoration:none; transition:.4s var(--u-ease); border:1px solid transparent; }
.u-btn--dark { background: var(--u-bark); color:#fff; }
.u-btn--dark:hover { background: var(--u-espresso); transform: translateY(-2px); }
.u-btn--ghost { border-color: var(--u-line); color: var(--u-bark); }
.u-btn--ghost:hover { border-color: var(--u-taupe); }
.u-btn .ln { width: 22px; height:1px; background: currentColor; transition: width .35s; }
.u-btn:hover .ln { width: 34px; }

/* ════════ SWATCH / OZELLIK GRIDS ════════ */
.u-block { padding: clamp(70px,9vw,120px) 0; }
.u-block--alt { background: var(--u-paper); }
.u-block__head { max-width: 60ch; margin-bottom: clamp(36px,5vw,60px); }
.u-swatches { display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media(min-width:680px){ .u-swatches{ grid-template-columns: repeat(4,1fr); gap: 20px; } }
.u-sw { background: var(--u-paper); border-radius: 5px; overflow:hidden; border:1px solid var(--u-line); }
.u-sw__img { aspect-ratio: 1/1; overflow:hidden; }
.u-sw__img img { width:100%; height:100%; object-fit: cover; transition: transform 1.1s var(--u-ease); }
.u-sw:hover .u-sw__img img { transform: scale(1.06); }
.u-sw__b { padding: 16px 18px 20px; }
.u-sw__n { font-family: var(--alt-font); font-size: 1.12rem; color: var(--u-bark); display:flex; gap:8px; align-items:baseline; }
.u-sw__n .i { font-family:var(--primary-font); font-size:11px; color:var(--u-taupe); letter-spacing:.1em; flex:0 0 auto; white-space:nowrap; }
.u-sw__d { margin-top: 7px; font-size: 13.5px; line-height:1.65; color: var(--medium-gray); }

/* color chips */
.u-colors { display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media(min-width:560px){ .u-colors{ grid-template-columns: repeat(3,1fr); } }
@media(min-width:900px){ .u-colors{ grid-template-columns: repeat(5,1fr); } }
.u-color { border-radius: 4px; overflow:hidden; border:1px solid var(--u-line); background: var(--u-paper); }
.u-color img { width:100%; height: 78px; object-fit: cover; display:block; }
.u-color span { display:block; padding: 10px 12px; font-family:var(--primary-font); font-size: 12px; color: var(--u-bark); letter-spacing:.02em; }

/* wood circles */
.u-woods { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px 12px; }
@media(min-width:680px){ .u-woods{ grid-template-columns: repeat(5,1fr); } }
@media(min-width:1040px){ .u-woods{ grid-template-columns: repeat(9,1fr); } }
.u-wood { text-align:center; }
.u-wood img { width:100%; max-width: 120px; aspect-ratio:1; border-radius: 50%; box-shadow: 0 12px 28px -14px rgba(43,32,24,.55); transition: transform .6s var(--u-ease); }
.u-wood:hover img { transform: translateY(-6px); }
.u-wood span { display:block; margin-top: 13px; font-family: var(--alt-font); font-size: .98rem; color: var(--u-bark); }

/* reasons (neden) */
.u-reasons { display:grid; grid-template-columns: 1fr; gap: 1px; background: var(--u-line); border:1px solid var(--u-line); border-radius: 6px; overflow:hidden; }
@media(min-width:680px){ .u-reasons{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1040px){ .u-reasons{ grid-template-columns: repeat(4,1fr); } }
.u-reason { background: var(--u-paper); padding: 30px 26px; }
.u-reason__n { font-family:var(--alt-font); font-size: 1.35rem; color: var(--u-bark); }
.u-reason__n small { display:block; font-family:var(--primary-font); font-size: 11px; letter-spacing:.2em; color: var(--u-taupe); margin-bottom: 8px; }
.u-reason__d { margin-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--medium-gray); }

/* feature list (madde) */
.u-features { display:grid; grid-template-columns:1fr; gap: 0; }
@media(min-width:880px){ .u-features{ grid-template-columns: repeat(2,1fr); column-gap: 60px; } }
.u-feat { display:flex; gap: 18px; padding: 20px 0; border-bottom:1px solid var(--u-line); }
.u-feat__i { flex:0 0 auto; width: 30px; height:30px; border-radius:50%; border:1px solid var(--u-taupe); color: var(--u-taupe); display:flex; align-items:center; justify-content:center; font-family:var(--alt-font); font-size: 13px; }
.u-feat__t { font-size: 14.5px; line-height: 1.65; color: var(--u-bark); }

/* systems (pencere) — editorial alternating */
.u-sys { display:grid; grid-template-columns:1fr; gap: 30px; align-items:center; padding: clamp(36px,5vw,56px) 0; border-bottom: 1px solid var(--u-line); }
@media(min-width:880px){ .u-sys{ grid-template-columns: .9fr 1.1fr; gap: 56px; } .u-sys:nth-child(even) .u-sys__media{ order:2; } }
.u-sys__media { border-radius: 6px; overflow:hidden; background: var(--u-cream); }
.u-sys__media img { width:100%; display:block; aspect-ratio: 900/1150; object-fit: cover; }
.u-sys__code { font-family:var(--primary-font); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--u-taupe); }
.u-sys__name { font-family:var(--alt-font); font-size: clamp(1.5rem,2.4vw,2.1rem); color: var(--u-bark); margin: 12px 0 14px; line-height:1.1; }
.u-sys__d { color: var(--medium-gray); line-height:1.85; font-size: 1rem; }

/* gallery (showcase) */
.u-gallery { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media(min-width:760px){ .u-gallery{ grid-template-columns: repeat(3,1fr); gap: 18px; } }
.u-gallery.tall { grid-auto-rows: 1fr; }
.u-gi { overflow:hidden; border-radius: 5px; background: var(--u-cream); }
.u-gi img { width:100%; height:100%; object-fit: cover; transition: transform 1.2s var(--u-ease); display:block; aspect-ratio: 4/3; }
.u-gi.portrait img { aspect-ratio: 3/4; }
.u-gi:hover img { transform: scale(1.06); }
.u-gi.span2 { grid-column: span 2; }

/* CTA band */
.u-cta { position: relative; overflow:hidden; background: var(--u-espresso); color:#fff; padding: clamp(70px,9vw,120px) 0; text-align:center; }
.u-cta h2 { color:#fff; font-family:var(--alt-font); font-size: clamp(1.9rem,3.4vw,3rem); margin:0 0 16px; }
.u-cta p { color: rgba(255,255,255,.72); max-width: 52ch; margin: 0 auto 30px; line-height:1.8; }

/* prev/next + related */
.u-related { padding: clamp(60px,8vw,110px) 0; background: var(--u-paper); }
.u-pager { display:flex; justify-content:space-between; gap: 16px; padding: 26px 0; border-top:1px solid var(--u-line); border-bottom:1px solid var(--u-line); }
.u-pager a { text-decoration:none; color: var(--u-bark); font-family:var(--primary-font); font-size: 12.5px; letter-spacing:.06em; display:flex; align-items:center; gap:12px; transition:.3s; }
.u-pager a:hover { color: var(--u-taupe); }
.u-pager .lbl { display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--u-taupe); margin-bottom:3px; }

.u-empty { padding: 80px 0; text-align:center; color: var(--medium-gray); }