/* Pueblo Production — MOR sürüm.
   Siyah zemin, lacivert yüzey, mor vurgu, beyaz metin.

   Kasa dilinin yerini kamera bölümünün dili aldı: kadraj (köşe L
   işaretleri + oran etiketi) ve çağrı formu (mono ızgara, etiket/değer
   kolonları). Kraft, ahşap, damga ve stencil yok.

   Izgara mantığı teknolojik sürümden korundu: --rh tek satır yüksekliği,
   genişlik oranından çıkar, --gap 3px, .trio tek blok, --o mekanizmasına
   dokunulmadı.

   Mor seyrek: yalnız aktif bölme göstergesi, odak halkası, kadraj köşe
   işaretleri (etkileşimde), seçili sekme ve e-posta altı çizgisi. Çizgiler
   ve ikincil metin gri/beyaz. Hiçbir hover kontrastı düşürmez.

   FONT: assets/fonts/ içindeki woff2'ler; yoksa Google Fonts <link>'i. */

@font-face{font-family:'Archivo Yerel';src:url('fonts/Archivo-Variable.woff2') format('woff2-variations');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime Yerel';src:url('fonts/CourierPrime-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime Yerel';src:url('fonts/CourierPrime-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
/* Stencil bu sürümde hiçbir öğede kullanılmıyor (numaralar mono) — tanım
   yalnız .stencil sınıfı elle kullanılmak istenirse dursun diye burada. */
@font-face{font-family:'Saira Yerel';src:url('fonts/SairaStencilOne-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --void:#07080A; --navy:#161C2B; --navy-2:#1C2437; --navy-3:#232C42;
  --violet:#B78BF2; --violet-hi:#CDACF9;
  --white:#F4F5F8; --mist:#A9AFBD; --mist-lo:#858C9A;
  --line:rgba(244,245,248,.16); --line-2:rgba(244,245,248,.09);
  --fd:'Archivo Yerel','Archivo',system-ui,sans-serif;
  --fm:'Courier Prime Yerel','Courier Prime',ui-monospace,monospace;
  --fs:'Saira Yerel',sans-serif;   /* yalnız Latin kısa dizeler; bu sürümde kullanılmıyor */
  --wrap:1680px; --pad:clamp(18px,4vw,64px);
  --rh:clamp(150px,15.5vw,238px);
  --gap:3px;
  --lbl:38px;            /* kapağın altındaki künye satırı için ayrılan yer */
  --tick:13px;           /* kadraj köşe işaretinin kol boyu */
  --marka-ic:5px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--white);font-family:var(--fd);font-variation-settings:'wdth' 100,'wght' 400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--white);text-decoration:none}
a:hover{color:var(--white)}
:focus-visible{outline:1px solid var(--violet);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
/* görsel olarak gizli, ekran okuyucuya ve arama motoruna açık */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--violet);color:var(--void);padding:10px 14px;font-family:var(--fm);font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* sürüme bağlı metin düğümleri: bu sürüm kamera kelimelerini gösterir */
.w-kasa{display:none}

/* ——— künye şeridi (logo) ——— */
.batten{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(13px,1.5vw,20px) var(--pad);background:var(--void)}
.batten .mark{display:block;width:clamp(104px,10.5vw,144px);aspect-ratio:1.486;background-color:var(--white);-webkit-mask:url('pueblo-logo.png') no-repeat 0 50%/contain;mask:url('pueblo-logo.png') no-repeat 0 50%/contain}
.batten-nav{display:flex;align-items:center;gap:14px;font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.batten-nav a{color:var(--mist);padding-bottom:2px;border-bottom:1px solid transparent}
.batten-nav a:hover,.batten-nav a:focus-visible{color:var(--white);border-bottom-color:var(--line)}

/* ——— yapışkan bölme şeridi ——— */
.bayrail{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);flex-wrap:wrap;padding:clamp(9px,1vw,13px) var(--pad);background:rgba(7,8,10,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-2)}
.bayrail a{color:var(--mist);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.bayrail a:hover,.bayrail a:focus-visible{color:var(--white);border-bottom-color:var(--line)}
.bayrail a[aria-current="true"]{color:var(--white);border-bottom-color:var(--violet)}
.bayrail .num{display:flex;align-items:baseline;gap:7px}
.bayrail .num i{font-family:var(--fm);font-style:normal;font-size:11px;line-height:1;letter-spacing:.16em;font-feature-settings:'tnum'}
.bayrail .num b{font-variation-settings:'wdth' 78,'wght' 700;font-weight:400;font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.09em}
.bayrail .plain{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.bayrail .sep{width:1px;height:14px;background:var(--line-2);margin:0 clamp(2px,.5vw,6px)}
.rail-mail{display:block;margin-left:auto;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:none;color:var(--mist)}
.rail-mail-short{display:none;letter-spacing:.2em;text-transform:uppercase}

/* ——— üç kapı: kadraj çerçeveleri ———
   Köşe L işaretleri tek pseudo-element üstünde sekiz gradyanla çizilir;
   etkileşimde 6px içeri kapanır ve mora döner — vizör netleniyor gibi.
   Diziliş ya üç kolon ya tek kolon: 2+1 hiçbir genişlikte oluşmuyor. */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2)}
.gate{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,3vw,52px);min-height:clamp(140px,18vw,300px);padding:clamp(22px,2.4vw,36px);color:var(--white);background:var(--navy);transition:background-color .3s}
.gate:hover,.gate:focus-visible{background:var(--navy-3);color:var(--white)}
.gate::before{content:"";position:absolute;inset:10px;pointer-events:none;
  background-image:
    linear-gradient(var(--mist-lo),var(--mist-lo)),linear-gradient(var(--mist-lo),var(--mist-lo)),
    linear-gradient(var(--mist-lo),var(--mist-lo)),linear-gradient(var(--mist-lo),var(--mist-lo)),
    linear-gradient(var(--mist-lo),var(--mist-lo)),linear-gradient(var(--mist-lo),var(--mist-lo)),
    linear-gradient(var(--mist-lo),var(--mist-lo)),linear-gradient(var(--mist-lo),var(--mist-lo));
  background-repeat:no-repeat;
  background-size:var(--tick) 1px,1px var(--tick),var(--tick) 1px,1px var(--tick),var(--tick) 1px,1px var(--tick),var(--tick) 1px,1px var(--tick);
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
  transition:inset .3s,background-image .3s}
.gate:hover::before,.gate:focus-visible::before{inset:4px;
  background-image:
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet)),
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet)),
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet)),
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet))}
.gate-no{font-family:var(--fm);font-size:clamp(12px,1.05vw,14px);line-height:1;letter-spacing:.22em;color:var(--mist);font-feature-settings:'tnum'}
.gate-body{display:flex;flex-direction:column;gap:10px}
.gate-tr{font-variation-settings:'wdth' 74,'wght' 700;font-size:clamp(19px,2.1vw,29px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.gate-en{font-family:var(--fm);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.gate-lede{font-size:13.5px;line-height:1.6;color:var(--mist);max-width:36ch}
.gate-stamp{display:none}   /* OPEN damgası kasa diliydi; kadrajda karşılığı yok */

/* ——— referans şeridi: plakasız, tek satır, beyaza indirgenmiş logolar ——— */
.consignee{background:var(--void);padding:clamp(24px,2.8vw,40px) 0 clamp(26px,3vw,44px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.rail-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2vw,26px);font-family:var(--fm);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.rail-head span[aria-hidden]{flex:1;height:1px;background:var(--line-2)}
.marquee-mask{position:relative;overflow:hidden;padding:clamp(10px,1.2vw,16px) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee{display:flex;width:max-content;animation:pueblo-marquee 58s linear infinite}
.marquee:hover{animation-play-state:paused}
/* kontakt föy hücreleri: logoların yarısı koyu-üstü-şeffaf, siyahta
   okunmuyordu. Nötr açık hücre hepsini eşitliyor. Logolar HER ZAMAN
   renkli: referans gizlenmez — "gri açılır" kuralı kartlara ait. */
.plate{flex:0 0 auto;display:block;width:clamp(128px,10.5vw,168px);aspect-ratio:2.8;background:#EDEFF3;padding:9px clamp(12px,1.2vw,18px);margin-right:1px}
/* silüete indirgemek Ford'un ovalini dolu bir leke yapıyordu; gri tonlama
   iç yapıyı koruyor, renk yine yalnız etkileşimde geliyor */
.plate img{width:100%;height:100%;object-fit:contain}
@keyframes pueblo-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ——— bölme başlığı ——— */
.bay{padding:clamp(34px,4.4vw,64px) 0 0}
.bay-head{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) clamp(14px,1.5vw,18px);border-bottom:1px solid var(--line);scroll-margin-top:60px}
.bay-head.flush{max-width:none;padding-left:0;padding-right:0;scroll-margin-top:60px}
.bay-line{display:flex;align-items:baseline;gap:clamp(12px,1.8vw,20px);flex-wrap:wrap}
.bay-no{font-family:var(--fm);font-size:clamp(12px,1.1vw,14px);line-height:1;letter-spacing:.24em;color:var(--mist)}
.bay-title{font-variation-settings:'wdth' 76,'wght' 700;font-size:clamp(22px,2.8vw,38px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.bay-line .rule{flex:1;min-width:30px;height:1px;background:var(--line)}
.bay-count{font-family:var(--fm);font-size:clamp(11px,1vw,13px);letter-spacing:.2em;color:var(--mist-lo)}
.bay-strap{display:flex;align-items:baseline;gap:clamp(12px,2vw,24px);flex-wrap:wrap;margin-top:clamp(10px,1.1vw,14px);color:var(--mist)}
.bay-strap .en{font-family:var(--fm);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.bay-strap .lede{font-size:13.5px;line-height:1.6;max-width:64ch}
.bay-claim{max-width:var(--wrap);margin:0 auto;padding:clamp(20px,2.2vw,30px) var(--pad) clamp(18px,2vw,26px)}
.bay-claim p{max-width:54ch;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--white);text-wrap:pretty;padding-left:clamp(14px,1.4vw,20px);border-left:1px solid var(--line)}

/* ——— IZGARA: eşit yükseklik, oranından çıkan genişlik, 3px boşluk ——— */
.hold{background:var(--void);padding:clamp(18px,2vw,26px) 0 clamp(34px,4vw,58px)}
.crates,.crates.tight,.crates.wide-min{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--gap)}
.crate{position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto;max-width:100%}
.crate>*{align-self:stretch}
.crate-title,.crate-note,.tools,.js .tabs{width:min-content;min-width:100%}
.crate:has(.still.vertical) .crate-title,
.crate:has(.still.vertical) .crate-note{min-width:22ch}
.crate.span-2{grid-column:auto}

/* kadraj köşe işaretleri: boş .crate-rule düğümü kapağın üstüne biniyor */
.crate-rule{display:block;position:absolute;left:0;top:0;width:100%;height:var(--rh);z-index:2;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet)),
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet)),
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet)),
    linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet));
  background-repeat:no-repeat;
  background-size:var(--tick) 1px,1px var(--tick),var(--tick) 1px,1px var(--tick),var(--tick) 1px,1px var(--tick),var(--tick) 1px,1px var(--tick);
  background-position:6px 6px,6px 6px,calc(100% - 6px) 6px,calc(100% - 6px) 6px,6px calc(100% - 6px),6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) calc(100% - 6px);
  transition:opacity .3s}
.crate:hover .crate-rule,.crate:focus-within .crate-rule{opacity:1}

/* oran etiketi: ızgaranın orana dayandığını söyleyen tek satır */
/* oran etiketi: kadrajın İÇİNDE, sağ üstte — künye satırındaki yılla
   çakışmıyor (doğrulamada üst üste biniyordu) */
.crate::after{content:"16:9";position:absolute;right:8px;top:7px;z-index:3;font-family:var(--fm);font-size:9.5px;line-height:1;letter-spacing:.16em;color:var(--white);background:rgba(7,8,10,.66);padding:4px 5px 3px;opacity:0;transition:opacity .3s}
.crate:has(.still.vertical)::after{content:"9:16"}
.crate:has(.trio)::after{content:"27:16"}
.crate:hover::after,.crate:focus-within::after{opacity:1}

.still{display:block;position:relative;height:var(--rh);width:calc(var(--rh) * 16 / 9);margin-bottom:var(--lbl);background:var(--navy)}
.still.vertical{width:calc(var(--rh) * 9 / 16)}
.still img{width:100%;height:100%;object-fit:cover;filter:grayscale(calc(1 - var(--o,0))) contrast(calc(1.04 - .04 * var(--o,0))) brightness(calc(.94 + .06 * var(--o,0)));transition:filter .45s,--o .45s}
@media (hover:hover) and (pointer:fine){ .crate:hover,.crate:focus-within{--o:1} }

.trio{position:relative;height:var(--rh);width:calc(var(--rh) * 27 / 16 + 2px);margin-bottom:var(--lbl)}
.trio-grid{display:flex;gap:1px;height:100%}
.trio .still{flex:0 0 auto;height:100%;width:calc(var(--rh) * 9 / 16);margin-bottom:0}
.trio-no{position:absolute;left:0;top:0;font-family:var(--fm);font-size:10px;line-height:1;letter-spacing:.14em;color:var(--white);background:rgba(7,8,10,.72);padding:5px 6px 4px}

/* künye: kapağın İÇİNDE değil, ALTINDA duran kerf çizgisi. Görüntünün
   hiçbir kısmını kapatmıyor; müşteri adı kırpılmıyor, iki satıra sarıyor. */
.label{position:absolute;left:0;right:0;top:100%;display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:10px;height:var(--lbl);padding:8px 0 0;background:none;border-top:1px solid var(--line);transform:none}
.label-brand{flex:1 1 auto;min-width:0;font-variation-settings:'wdth' 78,'wght' 700;font-size:11px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:normal;overflow:hidden;text-overflow:clip;max-height:2.4em;display:block}
.label-rule{display:none}
.label-year{flex:0 0 auto;font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;color:var(--mist)}
.still.vertical .label,.trio .label{gap:6px}
.still.vertical .label-brand,.trio .label-brand{font-size:10.5px}
.still.vertical .label-year,.trio .label-year{font-size:9.5px}
.trio>.label{top:100%}
.crate-title{margin-top:10px;font-family:var(--fm);font-size:11.5px;line-height:1.4;letter-spacing:.04em;color:var(--mist-lo);max-width:34ch;transition:color .3s}
.crate:hover .crate-title,.crate:focus-within .crate-title{color:var(--mist)}

.tools{display:flex;flex-wrap:wrap;gap:1px;margin-top:4px}
.tools span{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);background:var(--navy);padding:5px 8px 4px}
.crate-note{margin-top:8px;max-width:44ch;font-size:12.5px;line-height:1.55;color:var(--mist-lo);text-wrap:pretty}
.tabs{display:none}
.js .tabs{display:flex;flex-wrap:wrap;gap:1px;margin-top:4px}
.tab{font-family:var(--fm);font-size:11px;line-height:1;padding:6px 10px 5px;min-width:32px;color:var(--mist);background:var(--navy);border:0;cursor:pointer;transition:background-color .2s,color .2s}
.tab:hover{color:var(--white);background:var(--navy-3)}
.tab[aria-selected="true"]{color:var(--void);background:var(--violet)}

/* ——— hakkımızda + çağrı formu ——— */
.about{background:var(--navy);color:var(--white);padding:clamp(40px,4.6vw,72px) 0 clamp(40px,5vw,80px);border-top:1px solid var(--line-2)}
.about .bay-head{border-bottom-color:var(--line)}
.about .bay-line .rule{background:var(--line)}
.about-lede{max-width:64ch;margin:clamp(24px,2.6vw,36px) 0 clamp(34px,4vw,66px);font-size:clamp(16px,1.35vw,20px);line-height:1.65;color:var(--white);text-wrap:pretty}
.waybill{position:relative;background:var(--void);color:var(--white);padding:clamp(22px,2.6vw,40px) clamp(20px,2.4vw,40px) clamp(24px,2.8vw,42px);border:1px solid var(--line-2)}
.waybill-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:clamp(14px,1.5vw,20px);border-bottom:1px solid var(--line-2)}
.waybill-head b{font-variation-settings:'wdth' 76,'wght' 700;font-weight:400;font-size:clamp(16px,1.7vw,23px);line-height:1;letter-spacing:.01em}
.waybill-head span{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.mailto{display:inline-block;margin:clamp(20px,2.2vw,32px) 0 clamp(8px,.9vw,12px);font-variation-settings:'wdth' 70,'wght' 700;font-size:clamp(21px,5vw,76px);line-height:1;letter-spacing:-.025em;overflow-wrap:anywhere;color:var(--white);box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .25s}
.mailto:hover,.mailto:focus-visible{color:var(--white);box-shadow:inset 0 -2px 0 var(--violet)}
.field-cap{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(16px,2vw,28px) clamp(20px,3vw,52px);margin-top:clamp(24px,2.6vw,38px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line-2)}
.field{display:flex;flex-direction:column;gap:8px}
.field .rule{height:1px;background:var(--line-2)}
.field p{display:flex;flex-direction:column;gap:3px;font-size:clamp(14px,1.2vw,16px);line-height:1.5;color:var(--white)}
.reach{margin-top:clamp(24px,2.6vw,38px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line-2)}
.reach-list{display:flex;flex-wrap:wrap;gap:1px;margin-top:clamp(12px,1.4vw,18px)}
.reach-list a{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;background:var(--navy);color:var(--white);transition:background-color .2s}
.reach-list a:hover,.reach-list a:focus-visible{background:var(--navy-3);color:var(--white)}
.reach-list svg{display:block;width:30px;height:30px;padding:var(--marka-ic);filter:brightness(0) invert(1) opacity(.8);transition:filter .25s}
.reach-list a:hover svg{filter:none}
.reach-txt{display:flex;flex-direction:column;gap:2px}
.reach-name{font-variation-settings:'wdth' 84,'wght' 600;font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:.04em}
.reach-handle{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--mist)}
.legal{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(22px,2.4vw,34px);font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--mist)}
.foot{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2vw,26px);font-family:var(--fm);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.foot span[aria-hidden]{flex:1;height:1px;background:var(--line-2)}

@media (max-width:860px){
  /* eşik: üç kolon 860px'in altında dar kalıyor — doğrudan tek kolona */
  .gates{grid-template-columns:1fr}
  .gate{min-height:0}
}
@media (max-width:700px){
  :root{--rh:clamp(132px,36vw,190px);--gap:2px;--lbl:34px;--tick:10px}
  .rail-mail-full{display:none}
  .rail-mail-short{display:inline}
  .bayrail{gap:10px 14px}
  .label-brand{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee{animation:none}
  .still img,.gate,.gate::before,.crate-rule,.crate::after,.tab,.reach-list a,.mailto,.plate img,.bayrail a{transition:none}
  .crate{--o:0}
}