/* ===== Twins Boutique — mağaza ve sayfa bölümleri ===== */
[hidden]{ display: none !important; }
/* kayan başlık harflerinde "İ" noktası ve "Ş, Ç, ğ" kuyrukları kesilmesin: kelime kutusuna üstten ve alttan pay */
[data-split] .w{ padding: .2em .05em .18em; margin: -.2em -.05em -.18em; }

/* Başlıklar Bodoni ile; uzun metin/lead için Cormorant daha yumuşak */
.lead, .quote{ font-family: var(--serif-2); }
.display, .h2{ letter-spacing: -.02em; }
.display em, .h2 em{ font-weight: 400; }

/* ---------- Üst bar: logo görseli ---------- */
/* Logo: Instagram logosunun yüksek çözünürlüklü yeniden çizimi (brand/twins-logo-yeniden-cizim.jpg); iki yandaki çizgiler CSS ile */
.brand-logo{ position: relative; display: block; width: clamp(190px, 11vw, 280px); transition: width .6s var(--ease); }
.site-header.is-solid .brand-logo{ width: clamp(150px, 7.5vw, 190px); }
.brand-logo img{ width: 100%; height: auto; display: block; transition: opacity .5s ease; }
.brand-logo .logo-dark{ position: absolute; inset: 0; opacity: 0; }
.brand-logo .logo-light{ filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(0,0,0,.5)); }
.site-header.is-solid .brand-logo .logo-light, .site-header.on-light:not(.is-solid) .brand-logo .logo-light{ opacity: 0; }
.site-header.is-solid .brand-logo .logo-dark, .site-header.on-light:not(.is-solid) .brand-logo .logo-dark{ opacity: 1; }
.sh-icon{ display: grid; place-items: center; width: 40px; height: 40px; opacity: .85; transition: opacity .3s ease; }
.sh-icon svg{ width: 18px; height: 18px; }
.sh-icon:hover{ opacity: 1; }
.sh-cart{
  display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: inherit;
}
.cart-count{
  display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  border: 1px solid currentColor; font-size: 10px; letter-spacing: 0;
  transition: background .4s ease, color .4s ease, transform .5s var(--ease);
}
.cart-count.bump{ transform: scale(1.25); background: var(--gold-2); color: var(--ink); border-color: var(--gold-2); }
@media (max-width: 900px){ .hide-sm{ display: none !important; } .brand-logo, .site-header.is-solid .brand-logo{ width: 140px; } }

/* Menü: sağ tarafta ikizler */
.menu-twins{ background: radial-gradient(60% 60% at 50% 40%, #2a221d, #0e0c0b); display: flex; align-items: center; justify-content: center; gap: 4vw; }
.menu-twins::after{ display: none; }
.menu-twins img{ position: static; width: auto; height: 46vh; opacity: 0; transform: none; filter: none; transition: opacity 1.2s ease .4s, transform 1.4s var(--ease) .4s; }
.menu-twins .tw-l{ transform: translateX(40px); }
.menu-twins .tw-r{ transform: translateX(-40px); }
.menu.is-open .menu-twins img{ opacity: .9; transform: none; }

/* ---------- Giriş: ikizler ---------- */
html.intro-lock, html.intro-lock body{ overflow: hidden !important; }
.tw-intro{
  position: fixed; inset: 0; z-index: 100005; background: radial-gradient(70% 70% at 50% 45%, #1c1612, #0a0807 70%); color: var(--cream);
  display: grid; place-items: center; align-content: center; gap: 30px;
  transition: clip-path 1.2s var(--ease-io), visibility 0s linear 1.2s;
  clip-path: inset(0 0 0 0);
}
.tw-intro.is-done{ clip-path: inset(0 0 100% 0); visibility: hidden; }
.tw-stage{ position: relative; display: flex; align-items: center; justify-content: center; height: min(52vh, 420px); }
.tw-face{ height: 100%; width: auto; }
.tw-face.l{ clip-path: inset(50% 0 50% 92%); }
.tw-face.r{ clip-path: inset(50% 92% 50% 0); }
.tw-word{ height: 40%; width: auto; margin: 0 1.5vw; opacity: 0; filter: blur(14px); transform: scale(.96); }
.tw-intro.is-run .tw-face{ animation: twLine 1s var(--ease) .2s forwards, twPeek 1.4s var(--ease) 1.1s forwards; }
.tw-intro.is-run .tw-face.r{ animation-name: twLineR, twPeekR; }
.tw-intro.is-run .tw-word{ transition: opacity 1.4s ease 1.6s, filter 1.6s var(--ease) 1.6s, transform 2s var(--ease) 1.6s; opacity: 1; filter: blur(0); transform: none; }
@keyframes twLine{ to{ clip-path: inset(0 0 0 92%); } }
@keyframes twPeek{ from{ clip-path: inset(0 0 0 92%); } to{ clip-path: inset(0 0 0 0); } }
@keyframes twLineR{ to{ clip-path: inset(0 92% 0 0); } }
@keyframes twPeekR{ from{ clip-path: inset(0 92% 0 0); } to{ clip-path: inset(0 0 0 0); } }
.tw-tag{ font-size: 10px; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-2); opacity: 0; transition: opacity 1.2s ease 2.4s; margin-right: -.5em; }
.tw-intro.is-run .tw-tag{ opacity: 1; }
.tw-skip{ position: absolute; right: 24px; bottom: 24px; background: none; border: 1px solid rgba(217,191,140,.3); color: rgba(217,191,140,.75); padding: 10px 16px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Sinematik bölüm ---------- */
.cinema{ position: relative; background: #0a0807; color: var(--cream); }
.cine-sticky{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cine-sticky::before, .cine-sticky::after{ content: ""; position: absolute; left: 0; right: 0; height: 0; background: #050403; z-index: 3; transition: height 1.4s var(--ease); }
.cine-sticky::before{ top: 0; } .cine-sticky::after{ bottom: 0; }
.cinema.is-past-intro .cine-sticky::before, .cinema.is-past-intro .cine-sticky::after{ height: 6vh; }
.cine-twins{ position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 2vw; pointer-events: none; z-index: 1; }
.cine-twins img{ height: 78vh; width: auto; opacity: .07; transition: opacity 1.5s ease, transform 1.5s var(--ease); }
.cinema.is-end .cine-twins img{ opacity: .22; }
.cinema.has-frames .cine-twins{ display: none; }
.cinema.is-end .cine-twins .l{ transform: translateX(6vw); }
.cinema.is-end .cine-twins .r{ transform: translateX(-6vw); }

.cine-intro{
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 20px;
  opacity: calc(1 - var(--intro, 0) * 1.4); transform: translateY(calc(var(--intro, 0) * -50px)); pointer-events: none;
}
.cine-intro .display{ font-size: clamp(54px, 9vw, 150px); max-width: 12ch; }
.cine-intro .display em{ color: var(--gold-3); }
.cine-sub{ margin-top: 26px; color: rgba(244,239,228,.75); font-size: 15px; }
.cine-intro .scroll-cue{ margin-top: 50px; }
.intro-done .cine-intro [data-split] .l{ transform: none; }
.cine-intro [data-split] .l{ transition-delay: calc(var(--i) * 26ms + 200ms); }

.chapter{ position: absolute; z-index: 2; left: clamp(20px, 7vw, 120px); bottom: clamp(80px, 15vh, 160px); max-width: min(620px, 86vw); pointer-events: none; }
.chapter.right{ left: auto; right: clamp(20px, 7vw, 120px); text-align: right; }
.chapter-no{ display: flex; align-items: center; gap: 16px; font-size: 10px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: rgba(244,239,228,.75); margin-bottom: 22px; }
.chapter.right .chapter-no{ justify-content: flex-end; }
.chapter-no b{ font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--gold-2); }
.chapter-no i{ display: block; width: 0; height: 1px; background: var(--gold-2); transition: width 1.1s var(--ease) .2s; }
.chapter.is-active .chapter-no i{ width: 56px; }
.chapter-title{ font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.02em; }
.chapter-title em{ color: var(--gold-3); }
.chapter p{ margin-top: 18px; color: rgba(244,239,228,.8); font-size: 15px; }
.chapter .chapter-no, .chapter p{ opacity: 0; transform: translateY(14px); transition: opacity .8s ease .25s, transform .9s var(--ease) .25s; }
.chapter.is-active .chapter-no, .chapter.is-active p{ opacity: 1; transform: none; }
.chapter [data-split] .l{ transform: translateY(140%); }
.chapter.is-active [data-split] .l{ transform: none; }
.chapter:not(.is-active) [data-split] .l{ transition-delay: 0ms; transition-duration: .5s; }

.cine-end{ position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 20px; pointer-events: none; }
.cine-end::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(5,4,3,.62), rgba(5,4,3,0) 100%); opacity: 0; transition: opacity 1s ease; }
.cinema.is-end .cine-end::before{ opacity: 1; }
.cine-end .display{ font-size: clamp(50px, 8vw, 130px); }
.cine-end .display em{ color: var(--gold-3); }
.cine-end .eyebrow, .cine-end .actions{ opacity: 0; transform: translateY(16px); transition: opacity .8s ease .3s, transform .9s var(--ease) .3s; }
.cine-end .actions{ margin-top: 36px; }
.cinema.is-end .cine-end{ pointer-events: auto; }
.cinema.is-end .cine-end .eyebrow, .cinema.is-end .cine-end .actions{ opacity: 1; transform: none; }
.cine-end [data-split] .l{ transform: translateY(140%); }
.cinema.is-end .cine-end [data-split] .l{ transform: none; }

.cine-rail{ position: absolute; z-index: 4; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; opacity: 0; transition: opacity .6s ease; }
.cinema.is-past-intro .cine-rail{ opacity: 1; }
.cine-rail button{ display: flex; align-items: center; justify-content: flex-end; gap: 12px; background: none; border: 0; padding: 0; color: rgba(244,239,228,.6); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.cine-rail button span{ opacity: 0; transition: opacity .3s ease; }
.cine-rail button:hover span, .cine-rail button.is-active span{ opacity: 1; }
.cine-rail button::after{ content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(244,239,228,.55); transition: background .3s ease, border-color .3s ease; }
.cine-rail button.is-active::after{ background: var(--gold-2); border-color: var(--gold-2); }
.cine-skip{ position: absolute; z-index: 4; right: clamp(16px, 2.6vw, 36px); bottom: calc(6vh + 18px); padding: 11px 18px; border: 1px solid rgba(244,239,228,.3); font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; color: var(--cream); background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cine-skip:hover{ background: var(--cream); color: var(--ink); }


/* ---------- Ürün ızgarası ve kartı ---------- */
.pgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 30px) clamp(12px, 1.6vw, 24px); }
.pc{ opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0ms); }
.pc.is-in, [data-reveal].is-in .pc, .pgrid[data-related] .pc{ opacity: 1; transform: none; }
.pc-media{ position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.pc-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease, transform 1.6s var(--ease); }
.pc-b{ opacity: 0; }
.pc-media:hover .pc-b{ opacity: 1; }
.pc-media:hover img{ transform: scale(1.04); }
.pc-tag{ position: absolute; left: 14px; top: 14px; padding: 6px 10px; background: var(--paper); color: var(--ink); font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.pc-info{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.pc-name{ font-family: var(--serif); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.25; text-decoration: none; }
.pc-name:hover{ color: var(--gold); }
.pc-price{ font-size: 13px; font-weight: 500; white-space: nowrap; }
.pc-sub{ margin-top: 4px; font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); }

/* ---------- Kategoriler ---------- */
.cats{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 26px); }
.cat{ position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; }
.cat.big{ grid-row: span 2; aspect-ratio: auto; }
.cat .photo{ position: absolute; inset: 0; }
.cat::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,8,7,.7), rgba(10,8,7,0) 50%); }
.cat:hover .photo img{ transform: scale(1.05); }
.cat-t{ position: absolute; z-index: 1; left: 24px; bottom: 22px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 44px); line-height: 1; }
.cats .cat:nth-child(4){ grid-column: 2 / 4; aspect-ratio: auto; min-height: 260px; }

/* ---------- Hikaye bloğu ---------- */
.twins-grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.twins-art{ display: flex; justify-content: center; gap: 8%; }
.twins-art img{ height: clamp(260px, 36vw, 520px); width: auto; }
.twins-art.big img{ height: clamp(300px, 42vw, 600px); }

/* ---------- Sipariş kanalları ---------- */
.channels{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.channel{ display: grid; gap: 14px; align-content: start; padding: 34px 30px 0 0; }
.channel + .channel{ padding-left: 30px; border-left: 1px solid var(--line); }
.channel .link{ justify-self: start; margin-top: 6px; }

/* ---------- Koleksiyon başlığı ---------- */
.col-head{ padding: clamp(140px, 16vw, 200px) 0 30px; background: var(--ivory); }
.col-head .display{ font-size: clamp(54px, 8vw, 128px); }
.col-bar{ display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 40px; border-bottom: 1px solid var(--line); }
.g-filters{ display: flex; flex-wrap: wrap; gap: 4px 30px; padding-bottom: 22px; }
.chip{ position: relative; background: none; border: 0; padding: 6px 0; font-family: var(--serif); font-size: clamp(19px, 1.7vw, 25px); color: var(--ink-mute); transition: color .4s ease; }
.chip::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.chip:hover{ color: var(--ink); }
.chip.active{ color: var(--ink); font-style: italic; }
.chip.active::after{ transform: scaleX(1); }
.col-tools{ display: flex; align-items: center; gap: 24px; padding-bottom: 22px; }
.sort select{ appearance: none; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 6px 22px 6px 0; font: inherit; font-size: 12px; letter-spacing: .1em; color: var(--ink); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-size: 5px 5px; background-position: right 6px center, right 1px center; background-repeat: no-repeat; }

/* ---------- Ürün sayfası ---------- */
.pd{ padding: clamp(120px, 13vw, 170px) 0 clamp(70px, 8vw, 120px); background: var(--ivory); }
.pd-grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.pd-gallery{ display: grid; grid-template-columns: 82px 1fr; gap: 16px; position: sticky; top: 100px; }
.pd-thumbs{ display: grid; gap: 10px; align-content: start; }
.pd-thumb{ padding: 0; border: 1px solid transparent; background: none; aspect-ratio: 4 / 5; overflow: hidden; opacity: .55; transition: opacity .3s ease, border-color .3s ease; }
.pd-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.pd-thumb.active, .pd-thumb:hover{ opacity: 1; border-color: var(--ink); }
.pd-main{ aspect-ratio: 4 / 5; cursor: zoom-in; }
.pd-main img{ transition: transform .5s var(--ease); }
.pd-main.zoomed img{ transform: scale(1.8); }
.pd-info{ display: grid; gap: 22px; align-content: start; }
.pd-crumbs{ color: var(--ink-mute); }
.pd-crumbs a:hover{ color: var(--ink); }
.pd-info .eyebrow{ margin: 0; }
.pd-name{ font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 60px); line-height: 1.02; letter-spacing: -.015em; }
.pd-price{ font-size: 20px; font-weight: 500; letter-spacing: .02em; }
.pd-sample{ font-size: 11px; letter-spacing: .14em; color: var(--gold); }
.pd-opt{ display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-opt b{ color: var(--ink); font-weight: 600; }
.swatches, .sizes{ display: flex; flex-wrap: wrap; gap: 8px; }
.sw, .sz{ min-width: 54px; padding: 11px 16px; background: transparent; border: 1px solid var(--line); font-size: 12px; letter-spacing: .06em; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.sw:hover, .sz:hover{ border-color: var(--ink); }
.sw.active, .sz.active{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sizes.need .sz{ border-color: #b4553f; animation: shake .5s; }
@keyframes shake{ 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }
.pd-buy{ display: grid; grid-template-columns: auto 1fr; gap: 12px; padding-top: 6px; }
.pd-add{ height: 60px; }
.pd-add.is-done{ background: var(--gold-2); border-color: var(--gold-2); color: var(--ink); }
.pd-channels{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-channels .btn{ padding: 15px 12px; font-size: 9.5px; letter-spacing: .2em; }
.qty{ display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button{ width: 34px; height: 34px; background: none; border: 0; font-size: 16px; }
.qty span{ min-width: 26px; text-align: center; font-size: 13px; }
.qty.big button{ width: 46px; height: 58px; }
.acc details{ border-top: 1px solid var(--line); }
.acc details:last-child{ border-bottom: 1px solid var(--line); }
.acc summary{ list-style: none; cursor: pointer; padding: 18px 0; font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; display: flex; justify-content: space-between; }
.acc summary::after{ content: "+"; font-size: 16px; letter-spacing: 0; transition: transform .4s ease; }
.acc details[open] summary::after{ transform: rotate(45deg); }
.acc summary::-webkit-details-marker{ display: none; }
.acc p{ padding: 0 0 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.acc a{ text-decoration: underline; }

/* ---------- Sepet çekmecesi ---------- */
.cart-drawer{ position: fixed; inset: 0; z-index: 10080; visibility: hidden; transition: visibility 0s linear .9s; }
.cart-drawer.is-open{ visibility: visible; transition: visibility 0s; }
.cart-bg{ position: absolute; inset: 0; background: rgba(10,8,7,.55); opacity: 0; transition: opacity .7s ease; }
.cart-drawer.is-open .cart-bg{ opacity: 1; }
.cart-panel{ position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .9s var(--ease-io); }
.cart-drawer.is-open .cart-panel{ transform: none; }
.cart-head{ display: flex; justify-content: space-between; align-items: center; padding: 26px 28px; border-bottom: 1px solid var(--line); }
.cart-head h3{ font-family: var(--serif); font-size: 30px; }
.cart-head sup{ font-family: var(--sans); font-size: 11px; color: var(--gold); margin-left: 4px; }
.cart-x{ width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; display: grid; place-items: center; }
.cart-x svg{ width: 16px; height: 16px; }
.cart-items{ flex: 1; overflow-y: auto; padding: 10px 28px; }
.ci{ display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ci-img{ aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.ci-img img{ width: 100%; height: 100%; object-fit: cover; }
.ci-body{ display: grid; gap: 6px; align-content: start; }
.ci-name{ font-family: var(--serif); font-size: 19px; text-decoration: none; line-height: 1.2; }
.ci-opt{ font-size: 12px; color: var(--ink-mute); }
.ci-row{ display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ci-row b{ font-weight: 500; font-size: 14px; }
.ci-rm{ justify-self: start; background: none; border: 0; padding: 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); text-decoration: underline; }
.cart-empty{ flex: 1; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 40px; text-align: center; }
.cart-foot{ padding: 22px 28px 28px; border-top: 1px solid var(--line); display: grid; gap: 12px; background: var(--paper); }
.cart-total{ display: flex; justify-content: space-between; align-items: baseline; }
.cart-total span{ font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); }
.cart-total b{ font-family: var(--serif); font-weight: 400; font-size: 30px; }
.cart-note{ font-size: 12px; color: var(--ink-mute); }
.cart-go, .cart-wa{ width: 100%; height: 56px; }

/* ---------- Sipariş sayfası ---------- */
.co{ padding: clamp(130px, 14vw, 180px) 0 clamp(80px, 9vw, 130px); background: var(--ivory); min-height: 100vh; }
.co-head{ margin-bottom: clamp(40px, 5vw, 70px); }
.co-grid{ display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.co-step{ background: var(--paper); border: 1px solid var(--line); padding: clamp(26px, 3.2vw, 46px); margin-bottom: 22px; }
.co-no{ display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.co-no .num{ font-size: 26px; }
.two{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.field.err{ border-bottom-color: #b4553f; }
.field.err .label{ color: #b4553f; }
.opts{ display: grid; gap: 10px; margin-bottom: 14px; }
.opt{ display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line); cursor: pointer; transition: border-color .3s ease, background .3s ease; }
.opt:hover{ border-color: var(--ink-mute); }
.opt input{ accent-color: var(--ink); margin-top: 4px; width: 16px; height: 16px; }
.opt span{ display: grid; gap: 4px; }
.opt b{ font-family: var(--serif); font-weight: 400; font-size: 21px; }
.opt small{ font-size: 12px; color: var(--ink-mute); line-height: 1.6; }
.opt:has(input:checked){ border-color: var(--ink); background: var(--ivory); }
.pay.soon{ opacity: .55; cursor: not-allowed; }
.pay.soon small{ color: var(--gold); }
.consent{ display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 22px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.consent input{ accent-color: var(--ink); width: 16px; height: 16px; margin-top: 3px; }
.consent a{ text-decoration: underline; }
.consent.err{ color: #b4553f; }
.co-submit{ width: 100%; height: 62px; }
.co-summary{ position: sticky; top: 110px; background: var(--ink); color: var(--cream); padding: clamp(24px, 2.6vw, 36px); }
.co-line{ display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.co-line img{ width: 58px; aspect-ratio: 4 / 5; object-fit: cover; }
.co-line b{ display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; }
.co-line span{ font-size: 11px; color: rgba(244,239,228,.6); }
.co-line em{ font-style: normal; font-size: 13px; }
.co-summary .muted{ color: rgba(244,239,228,.7); padding: 20px 0; font-size: 13px; }
.co-summary .muted a{ text-decoration: underline; }
.co-total{ display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; }
.co-total span{ font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(244,239,228,.55); }
.co-total b{ font-family: var(--serif); font-weight: 400; font-size: 38px; color: var(--gold-3); }
.perks{ list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line-light); display: grid; gap: 10px; }
.perks li{ position: relative; padding-left: 22px; font-size: 13px; color: rgba(244,239,228,.78); }
.perks li::before{ content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--gold-2); }

/* ---------- Teşekkürler ---------- */
.thanks{ min-height: 100vh; padding: clamp(150px, 18vw, 220px) 0 120px; background: var(--ivory); }
.thanks-inner{ display: grid; justify-items: center; text-align: center; }
.thanks-check{ width: 110px; height: 110px; margin-bottom: 40px; fill: none; stroke: var(--gold); stroke-width: 1.2; }
.thanks-check circle{ stroke-dasharray: 352; stroke-dashoffset: 352; animation: draw 1.6s var(--ease) .3s forwards; }
.thanks-check path{ stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 1s var(--ease) 1.3s forwards; stroke-width: 1.6; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
.order-no{ display: grid; gap: 8px; margin-top: 40px; padding: 22px 36px; border: 1px solid var(--line); background: var(--paper); }
.order-no b{ font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: .06em; }

/* ---------- Hikayemiz ---------- */
.about-hero{ position: relative; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 30%, #2a221d, #0a0807 70%); color: var(--cream); overflow: hidden; }
.about-twins{ position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 4vw; }
.about-twins img{ height: 80vh; width: auto; opacity: .16; }
.about-inner{ position: relative; text-align: center; display: grid; justify-items: center; }
.about-inner .display em{ color: var(--gold-3); }
.about-sub{ margin-top: 26px; color: rgba(244,239,228,.75); }
.values3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.values3 > div{ display: grid; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line-light); }
.values3 .num{ color: var(--gold-2); }

/* ---------- İletişim ---------- */
.contact-list{ border-top: 1px solid var(--line); }
.c-row{ display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 24px; padding: clamp(24px, 3vw, 42px) 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .7s var(--ease); }
.c-row b{ font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 64px); line-height: 1; transition: color .5s ease; word-break: break-word; }
.c-arr{ width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease); }
.c-arr svg{ width: 18px; height: 18px; }
.c-row:hover{ padding-left: 16px; }
.c-row:hover b{ color: var(--gold); }
.c-row:hover .c-arr{ background: var(--ink); color: var(--ivory); transform: rotate(-45deg); }
.contact-split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.map-wrap{ position: relative; aspect-ratio: 4 / 5; background: var(--sand); }
.map-wrap iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(.25) contrast(1.05); }

/* ---------- Yasal ---------- */
.legal-draft{ margin-top: 26px; max-width: 70ch; padding: 16px 20px; border-left: 2px solid var(--gold); background: rgba(166,135,90,.08); font-size: 13px; color: var(--ink-soft); }
.legal-text{ display: grid; grid-template-columns: 260px 1fr; gap: 50px; }
.legal-nav{ position: sticky; top: 110px; align-self: start; display: grid; gap: 10px; }
.legal-nav a{ font-size: 12px; letter-spacing: .1em; text-decoration: none; color: var(--ink-soft); }
.legal-nav a:hover{ color: var(--ink); }
.legal-text article{ padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 110px; }
.legal-text article p{ margin-top: 14px; color: var(--ink-soft); line-height: 1.9; max-width: 72ch; }

/* ---------- Footer logosu ---------- */
.footer-logo{ width: min(420px, 78vw); height: auto; }

/* ---------- Ana sayfa: lüks bölümler ---------- */
/* kayan şerit */
.marquee{ position: relative; overflow: hidden; background: var(--ink); color: var(--gold-2); border-top: 1px solid rgba(217,191,140,.16); border-bottom: 1px solid rgba(217,191,140,.16); padding: clamp(18px, 2vw, 28px) 0; }
.mq-track{ display: flex; align-items: center; gap: clamp(28px, 3vw, 54px); width: max-content; animation: mq 42s linear infinite; }
.mq-track span{ font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 40px); white-space: nowrap; letter-spacing: .01em; }
.mq-track i{ width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); flex: none; }
@keyframes mq{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mq-track{ animation: none; } }

/* editoryal: büyük görsel + metin + taşan detay */
.editorial{ background: var(--ivory); overflow: hidden; }
.ed-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 7vw, 130px); align-items: center; }
.ed-main{ position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ed-main img, .ed-detail img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-copy{ position: relative; padding-bottom: clamp(120px, 16vw, 260px); }
.ed-copy .text{ margin-top: 28px; }
.ed-meta{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 34px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.ed-detail{ position: absolute; right: 0; bottom: 0; width: clamp(150px, 17vw, 300px); aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(14,12,11,.35); }

/* kombin: 3 sütun */
.look{ background: var(--paper); }
.look-grid{ grid-template-columns: repeat(3, 1fr); }

/* atmosfer bandı */
.band{ position: relative; min-height: min(92vh, 980px); display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--cream); text-align: center; }
.band-img{ position: absolute; inset: -8% 0; margin: 0; }
.band-img img{ width: 100%; height: 100%; object-fit: cover; }
.band::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(10,8,7,.55), rgba(10,8,7,.82)); }
.band-copy{ position: relative; z-index: 1; display: grid; justify-items: center; gap: 24px; padding: 0 20px; }
.band-copy .h2 em{ color: var(--gold-3); }
.band-sub{ max-width: 46ch; color: rgba(244,239,228,.8); font-size: 15px; }

/* ürün kartı ince ayarlar */
.pc-media{ background: #e9e1d4; }
.pc-media::after{ content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0); transition: border-color .6s ease, inset .6s var(--ease); pointer-events: none; }
.pc-media:hover::after{ inset: 12px; border-color: rgba(255,255,255,.55); }

/* büyük ekranlar: içerik ve yazılar ekranla birlikte büyür (1600 px'lik tasarım oranında) */
@media (min-width: 1700px){
  :root{ --maxw: 86vw; --k: calc(100vw / 1600); }
  body, .text, .band-sub, .cine-sub, .walk-sub{ font-size: calc(15 * var(--k)); }
  .eyebrow, .btn, .link, .sh-link, .sh-menu em, .sh-cart, .ed-meta{ font-size: calc(10.5 * var(--k)); }
  .chip{ font-size: calc(24 * var(--k)); } .cat-t{ font-size: calc(44 * var(--k)); }
  .cart-panel{ width: min(calc(480 * var(--k)), 100%); } .ci{ grid-template-columns: calc(92 * var(--k)) 1fr; } .ci-name{ font-size: calc(19 * var(--k)); }
  .lang-btn{ width: calc(40 * var(--k)); height: calc(40 * var(--k)); font-size: calc(10 * var(--k)); } .lang-list span{ font-size: calc(20 * var(--k)); }
  .pd-name{ font-size: calc(58 * var(--k)); } .pd-price{ font-size: calc(20 * var(--k)); } .pd-gallery{ grid-template-columns: calc(82 * var(--k)) 1fr; top: 170px; }
  .small-caps, .pc-tag{ font-size: calc(10 * var(--k)); }
  .pc-name{ font-size: calc(20 * var(--k)); } .pc-price{ font-size: calc(13 * var(--k)); } .pc-sub{ font-size: calc(11 * var(--k)); }
  .h4{ font-size: calc(30 * var(--k)); }
  .h2{ font-size: calc(96 * var(--k)); } .display{ font-size: calc(140 * var(--k)); }
  .lead{ font-size: calc(40 * var(--k)); } .mq-track span{ font-size: calc(38 * var(--k)); }
  .btn{ padding: calc(17 * var(--k)) calc(32 * var(--k)); }
  .eyebrow::before{ width: calc(40 * var(--k)); }
}

/* hakkımızda: kolaj + dokular; iletişim: harita sitenin tonunda */
.about-collage{ position: relative; padding: 0 0 clamp(60px, 8vw, 140px) clamp(40px, 6vw, 120px); }
.ac-main{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ac-small{ position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(14,12,11,.35); }
.ac-main img, .ac-small img, .textures img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.textures{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.textures figure{ position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin: 0; }
.textures figcaption{ position: absolute; left: 22px; bottom: 18px; z-index: 1; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 40px); color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.map-wrap iframe{ filter: grayscale(1) sepia(.28) contrast(.92) brightness(1.02); }

/* ---------- Mobil ---------- */
@media (max-width: 1100px){ .pgrid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){
  .pgrid{ grid-template-columns: repeat(2, 1fr); }
  .cats{ grid-template-columns: 1fr 1fr; }
  .cat.big{ grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 4.4; }
  .cats .cat:nth-child(4){ grid-column: 1 / -1; min-height: 220px; }
  .twins-grid, .pd-grid, .co-grid, .contact-split, .legal-text{ grid-template-columns: 1fr; }
  .pd-gallery{ position: static; grid-template-columns: 1fr; }
  .pd-thumbs{ order: 2; grid-template-columns: repeat(4, 1fr); }
  .co-summary, .legal-nav{ position: static; }
  .channels, .values3{ grid-template-columns: 1fr; }
  .textures{ grid-template-columns: 1fr 1fr; } .textures figure:nth-child(3){ display: none; }
  .pd-channels{ grid-template-columns: 1fr; } .pd-channels .btn{ white-space: normal; }
  .menu-twins{ display: none; }
  .ed-grid{ grid-template-columns: 1fr; } .ed-copy{ padding-bottom: 0; } .ed-detail{ position: relative; width: 46%; margin: 34px 0 0 auto; }
  .look-grid{ grid-template-columns: repeat(2, 1fr); } .look-grid .pc:nth-child(3){ grid-column: 1 / -1; }
  .channel + .channel{ padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 26px; }
  .two{ grid-template-columns: 1fr; }
  .chapter, .chapter.right{ left: 18px; right: 44px; text-align: left; bottom: 70px; max-width: none; }
  .chapter.right .chapter-no{ justify-content: flex-start; }
  .cine-twins img{ height: 48vh; }
  .cine-rail button span{ display: none; }
  .c-row{ grid-template-columns: 1fr auto; gap: 8px 16px; }
  .c-row .small-caps{ grid-column: 1 / -1; }
  .about-twins img{ height: 46vh; }
  .tw-stage{ height: 34vh; }
  .cinema.is-past-intro .cine-sticky::before, .cinema.is-past-intro .cine-sticky::after{ height: 3.5vh; }
}

/* büyük ekranlar: küçük yazılar da ölçeklensin (otomatik üretildi: sabit px yazı boyutları × --k) */
@media (min-width: 1700px){
  body{ font-size: calc(15 * var(--k)); }
  .eyebrow{ font-size: calc(10.5 * var(--k)); }
  .text{ font-size: calc(15 * var(--k)); }
  .small-caps{ font-size: calc(10 * var(--k)); }
  .btn{ font-size: calc(10.5 * var(--k)); }
  .link{ font-size: calc(10.5 * var(--k)); }
  .sh-menu{ font-size: calc(10.5 * var(--k)); }
  .sh-link{ font-size: calc(10.5 * var(--k)); }
  .site-header .btn{ font-size: calc(10 * var(--k)); }
  .menu-close{ font-size: calc(10.5 * var(--k)); }
  .menu-links a small{ font-size: calc(10 * var(--k)); }
  .menu-foot{ font-size: calc(13 * var(--k)); }
  .menu-foot h5{ font-size: calc(9.5 * var(--k)); }
  .crumbs{ font-size: calc(10 * var(--k)); }
  .scroll-cue{ font-size: calc(10 * var(--k)); }
  .field > .label, .field > label{ font-size: calc(9.5 * var(--k)); }
  .footer-cols h5{ font-size: calc(9.5 * var(--k)); }
  .footer-cols a{ font-size: calc(14 * var(--k)); }
  .footer-cols p{ font-size: calc(14 * var(--k)); }
  .footer-bottom{ font-size: calc(10 * var(--k)); }
  .sh-cart{ font-size: calc(10.5 * var(--k)); }
  .cart-count{ font-size: calc(10 * var(--k)); }
  .tw-tag{ font-size: calc(10 * var(--k)); }
  .tw-skip{ font-size: calc(10 * var(--k)); }
  .cine-sub{ font-size: calc(15 * var(--k)); }
  .chapter-no{ font-size: calc(10 * var(--k)); }
  .chapter p{ font-size: calc(15 * var(--k)); }
  .cine-rail button{ font-size: calc(10 * var(--k)); }
  .cine-skip{ font-size: calc(10 * var(--k)); }
  .pc-tag{ font-size: calc(9 * var(--k)); }
  .pc-price{ font-size: calc(13 * var(--k)); }
  .pc-sub{ font-size: calc(11 * var(--k)); }
  .sort select{ font-size: calc(12 * var(--k)); }
  .pd-sample{ font-size: calc(11 * var(--k)); }
  .sw, .sz{ font-size: calc(12 * var(--k)); }
  .pd-channels .btn{ font-size: calc(9.5 * var(--k)); }
  .qty span{ font-size: calc(13 * var(--k)); }
  .acc summary{ font-size: calc(10.5 * var(--k)); }
  .acc summary::after{ font-size: calc(16 * var(--k)); }
  .acc p{ font-size: calc(14 * var(--k)); }
  .cart-head sup{ font-size: calc(11 * var(--k)); }
  .ci-opt{ font-size: calc(12 * var(--k)); }
  .ci-row b{ font-size: calc(14 * var(--k)); }
  .ci-rm{ font-size: calc(10 * var(--k)); }
  .cart-total span{ font-size: calc(10.5 * var(--k)); }
  .cart-note{ font-size: calc(12 * var(--k)); }
  .opt small{ font-size: calc(12 * var(--k)); }
  .consent{ font-size: calc(13 * var(--k)); }
  .co-line span{ font-size: calc(11 * var(--k)); }
  .co-line em{ font-size: calc(13 * var(--k)); }
  .co-summary .muted{ font-size: calc(13 * var(--k)); }
  .co-total span{ font-size: calc(10 * var(--k)); }
  .perks li{ font-size: calc(13 * var(--k)); }
  .legal-draft{ font-size: calc(13 * var(--k)); }
  .legal-nav a{ font-size: calc(12 * var(--k)); }
  .ed-meta{ font-size: calc(11 * var(--k)); }
  .band-sub{ font-size: calc(15 * var(--k)); }
}