/* Etrivia Studio — referans tasarım (v3, görsele birebir)
   Tam genişlik banner + 3D masa, yatay kategori karoları, 7'li koleksiyon
   şeridi, NOIR bandı, atölye şeridi ve koyu footer. */

:root{
  --kagit:#FFFFFF;
  --murekkep:#121212;
  --metin:#56564F;
  --silik:#8E8E87;
  --cizgi:#E3E1DB;
  --cizgi-2:#EFEDE8;
  --studyo:#F0EFEC;
  --altin:#B6AB97;
  --ref-max:1760px;
  --ref-gut:clamp(16px,2.2vw,38px);
}

body{background:var(--kagit);color:var(--murekkep)}
.ref-wrap{max-width:var(--ref-max);margin:0 auto;padding-inline:var(--ref-gut)}
.ref-tam{max-width:var(--ref-max);margin:0 auto}
.ref-ust{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--silik);font-weight:400}

/* ── 1. Duyuru barı + header ───────────────────── */
.site-header{position:sticky;top:0;left:auto;right:auto;z-index:90;background:var(--kagit);border-bottom:1px solid var(--cizgi)}
.site-header .announce{background:var(--murekkep);color:#E9E7E2;border-bottom:0;margin:0!important;
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;padding:9px var(--ref-gut);text-align:center}
.site-header.solid{background:var(--kagit);backdrop-filter:none;border-color:var(--cizgi)}
.site-header .navbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,54px);
  max-width:var(--ref-max);margin:0 auto;padding:14px var(--ref-gut)}
.site-header.solid .navbar{padding-block:11px}

.brand.kilit{display:block;line-height:1;white-space:nowrap;text-align:center}
.brand.kilit .bk-ad{display:block;font-size:clamp(1.05rem,1.35vw,1.4rem);font-weight:300;letter-spacing:.44em;text-transform:uppercase;text-indent:.44em}
.brand.kilit .bk-alt{display:block;margin-top:4px;font-size:.5rem;letter-spacing:.62em;text-transform:uppercase;color:var(--silik);text-indent:.62em}

.main-nav{justify-self:start}
.main-nav ul{display:flex;gap:clamp(14px,1.9vw,30px);list-style:none;margin:0;padding:0}
.main-nav a{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--murekkep);padding:6px 0;position:relative;display:inline-block}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--murekkep);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,.84,.28,1)}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{transform:scaleX(1)}

.navtools{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px)}
.navtools .ikon{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:3px;cursor:pointer;color:var(--murekkep)}
.navtools .ikon svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.navtools .sayi{font-size:.66rem;color:var(--metin)}
.nav-toggle{display:none;background:none;border:1px solid var(--cizgi);padding:8px 13px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}

/* ── 2. BANNER — tam genişlik sahne, yazı üstte ── */
.ref-hero{position:relative;width:100%;aspect-ratio:1024/314;min-height:430px;max-height:76vh;
  overflow:hidden;background:linear-gradient(178deg,#FCFBF9 0%,#F2F0EC 52%,#E4E1DA 100%);touch-action:pan-y}
.ref-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:1}
.ref-hero.cekiliyor canvas{cursor:grabbing}
.ref-hero .hero-yedek{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:1;transition:opacity .8s}
.ref-hero.canli:not(.yedekte) .hero-yedek{opacity:0}
.ref-hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(94deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 26%,rgba(255,255,255,.45) 40%,rgba(255,255,255,0) 54%)}

.hero-ic{position:relative;z-index:3;height:100%;max-width:var(--ref-max);margin:0 auto;
  padding:clamp(22px,3.2vw,50px) var(--ref-gut);display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hero-ic a,.hero-ic button{pointer-events:auto}
.hero-yazi{max-width:min(52%,620px)}
.hero-yazi h1{font-size:clamp(2.1rem,4.35vw,4.1rem);font-weight:200;line-height:1.02;letter-spacing:-.02em;margin:0 0 clamp(12px,1.5vw,22px)}
.hero-yazi h1 em{font-style:normal;color:var(--altin)}
.hero-yazi .giris{font-size:clamp(.82rem,1.08vw,1rem);line-height:1.66;color:var(--metin);max-width:40ch;margin:0 0 clamp(16px,2vw,26px)}
.hero-dugmeler{display:flex;flex-wrap:wrap;gap:clamp(10px,1.1vw,16px);margin-bottom:clamp(20px,2.8vw,40px)}
.dgm{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:1px solid var(--murekkep);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;transition:background .35s,color .35s,border-color .35s;cursor:pointer}
.dgm.dolu{background:var(--murekkep);color:#fff}
.dgm.dolu:hover{background:#2C2C27;border-color:#2C2C27}
.dgm.bos{background:transparent;color:var(--murekkep)}
.dgm.bos:hover{background:var(--murekkep);color:#fff}
.dgm .ok{transition:transform .35s}
.dgm:hover .ok{transform:translateX(4px)}

.hero-sayilar{display:flex;flex-wrap:wrap;gap:0}
.hero-sayilar div{position:relative;padding:0 clamp(16px,1.9vw,30px)}
.hero-sayilar div:first-child{padding-left:0}
.hero-sayilar div+div::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--cizgi)}
.hero-sayilar b{display:block;font-size:clamp(1.25rem,2vw,1.95rem);font-weight:200;line-height:1.1;letter-spacing:.01em}
.hero-sayilar span{display:block;margin-top:6px;font-size:.54rem;letter-spacing:.17em;text-transform:uppercase;color:var(--metin);line-height:1.5;max-width:13ch}

.hero-not{position:absolute;right:var(--ref-gut);bottom:clamp(16px,2.2vw,34px);z-index:3;text-align:right;
  font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--metin)}
.hero-not small{display:block;margin-top:5px;font-size:.52rem;letter-spacing:.16em;color:var(--silik)}
#heroMalzeme{position:absolute;right:var(--ref-gut);top:clamp(16px,2vw,28px);z-index:4;display:flex;gap:7px}
#heroMalzeme button{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.72);
  backdrop-filter:blur(7px);border:1px solid rgba(18,18,18,.1);padding:6px 11px;cursor:pointer;
  font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--murekkep);transition:background .3s,border-color .3s}
#heroMalzeme button i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.14)}
#heroMalzeme button[data-malzeme="celik"] i{background:linear-gradient(135deg,#E2E2DF,#A9A9A5)}
#heroMalzeme button[data-malzeme="siyah"] i{background:linear-gradient(135deg,#3A3A38,#070707)}
#heroMalzeme button[data-malzeme="zebra"] i{background:repeating-linear-gradient(118deg,#121212 0 2px,#F3F1EC 2px 4px)}
#heroMalzeme button.secili,#heroMalzeme button:hover{background:#fff;border-color:rgba(18,18,18,.32)}
.ref-hero.yedekte #heroMalzeme{display:none}

/* ── 3. Kategori karoları — tam genişlik, yatay ── */
.kat-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#fff}
.kat-karo{position:relative;display:block;aspect-ratio:253/225;overflow:hidden;background:var(--studyo)}
.kat-karo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.84,.28,1)}
.kat-karo:hover img{transform:scale(1.05)}
.kat-karo b{position:absolute;left:clamp(14px,1.5vw,26px);top:clamp(14px,1.5vw,26px);z-index:2;
  font-size:clamp(.6rem,.82vw,.8rem);font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:var(--murekkep)}
.kat-karo .ok{position:absolute;left:clamp(14px,1.5vw,26px);bottom:clamp(12px,1.4vw,22px);z-index:2;
  color:var(--murekkep);font-size:1rem;transition:transform .4s}
.kat-karo:hover .ok{transform:translateX(7px)}

/* ── 4. TÜM KOLEKSİYON ─────────────────────────── */
.ref-kol{padding:clamp(22px,2.6vw,40px) 0 clamp(26px,3vw,46px)}
.ref-bas{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(14px,1.6vw,24px)}
.ref-bas h2{margin:0;font-size:clamp(.92rem,1.18vw,1.18rem);font-weight:300;letter-spacing:.28em;text-transform:uppercase}
.ref-bas .tumu{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;gap:9px;align-items:center;color:var(--metin)}
.ref-bas .tumu .ok{transition:transform .35s}
.ref-bas .tumu:hover{color:var(--murekkep)}
.ref-bas .tumu:hover .ok{transform:translateX(4px)}

.kol-izgara{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--cizgi);
  border:1px solid var(--cizgi)}
.kol-kart{display:block;background:#fff;padding-bottom:clamp(12px,1.3vw,18px)}
.kol-gorsel{display:block;position:relative;aspect-ratio:133/143;overflow:hidden;background:var(--studyo);margin-bottom:clamp(10px,1.1vw,15px)}
.kol-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s,transform 1.1s cubic-bezier(.16,.84,.28,1)}
.kol-gorsel img.alt{opacity:0}
.kol-kart:hover .kol-gorsel img.ana{opacity:0}
.kol-kart:hover .kol-gorsel img.alt{opacity:1}
.kol-kart:hover .kol-gorsel img{transform:scale(1.04)}
.kol-kart>*:not(.kol-gorsel){display:block;padding-inline:clamp(9px,.85vw,14px)}
.kol-kat{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--silik);margin-bottom:7px}
.kol-ad{font-size:clamp(.68rem,.82vw,.8rem);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.3;margin-bottom:6px}
.kol-olcu{font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--silik);margin-bottom:11px}
.kol-fiyat{font-size:clamp(.74rem,.92vw,.92rem);letter-spacing:.01em;color:var(--murekkep);margin-bottom:11px;font-variant-numeric:tabular-nums}
.kol-fiyat del{color:var(--silik);margin-right:6px;font-size:.8em}
.kol-fiyat ins{text-decoration:none}
.kol-kart .kol-renkler{display:flex;gap:6px}
.kol-renkler i{width:11px;height:11px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.12)}
.rk-gri{background:#9D9D99}
.rk-krem{background:#EFEBE2}
.rk-siyah{background:#141414}
.rk-lacivert{background:#1D2A52}
.rk-turuncu{background:#D7471B}

/* ── 5. NOIR SERİSİ ────────────────────────────── */
.ref-noir{position:relative;background:#060606;color:#F1EFEA;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);align-items:center;
  aspect-ratio:1024/248;min-height:380px}
.noir-yazi{position:relative;z-index:3;padding:clamp(22px,3vw,52px) clamp(18px,2.6vw,46px)}
.noir-yazi .ref-ust{color:rgba(241,239,234,.52)}
.noir-yazi h2{font-size:clamp(1.6rem,3.1vw,3rem);font-weight:200;line-height:1.08;letter-spacing:-.012em;margin:12px 0 16px}
.noir-yazi p{color:rgba(241,239,234,.68);max-width:44ch;line-height:1.7;font-size:clamp(.78rem,.95vw,.92rem);margin:0 0 clamp(18px,2.2vw,28px)}
.noir-yazi .dgm{border-color:rgba(241,239,234,.4);color:#F1EFEA}
.noir-yazi .dgm:hover{background:#F1EFEA;color:#070707;border-color:#F1EFEA}

.noir-gorsel{position:relative;height:100%;overflow:hidden;background:#090909}
.noir-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.noir-gorsel .zemin{position:absolute;inset:0;
  background:radial-gradient(120% 130% at 18% 18%,#3A3A37 0%,#141412 36%,#060606 72%)}
.noir-gorsel .huzme{position:absolute;top:-30%;left:-20%;width:60%;height:170%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 72%);
  transform:rotate(10deg);animation:refParlak 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes refParlak{0%{transform:translateX(-25%) rotate(10deg)}58%,100%{transform:translateX(250%) rotate(10deg)}}
.noir-gorsel .hali{position:absolute;right:-7%;bottom:-2%;width:74%;height:50%;
  transform:perspective(1000px) rotateX(44deg) rotate(-2deg);transform-origin:50% 100%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.noir-gorsel .hali svg{width:100%;height:100%;display:block}
.noir-gorsel .kup{position:absolute;left:42%;bottom:23%;width:25%;aspect-ratio:1/.6;
  background:linear-gradient(160deg,#333331 0%,#0C0C0B 40%,#1C1C1A 66%,#030303 100%);
  box-shadow:0 40px 64px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12)}
.noir-gorsel .kup::before{content:"";position:absolute;left:-7%;right:-7%;top:-22%;height:24%;
  background:linear-gradient(168deg,#4A4A45 0%,#151513 100%);
  clip-path:polygon(7% 100%,0 0,100% 0,93% 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.noir-gorsel .kup::after{content:"";position:absolute;inset:0;
  background:linear-gradient(116deg,rgba(255,255,255,0) 24%,rgba(255,255,255,.18) 42%,rgba(255,255,255,0) 58%)}
.noir-gorsel .vinyet{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(92% 86% at 46% 44%,rgba(0,0,0,0) 44%,rgba(0,0,0,.66) 100%)}

/* ── 6. Atölye şeridi ──────────────────────────── */
.ref-atolye{display:grid;grid-template-columns:minmax(140px,16fr) minmax(0,84fr);align-items:center;
  gap:clamp(14px,1.6vw,26px);padding:clamp(14px,1.6vw,22px) 0;background:#fff}
.atolye-bas{margin:0;padding-left:var(--ref-gut);font-size:clamp(.66rem,.86vw,.84rem);font-weight:300;
  letter-spacing:.24em;text-transform:uppercase;line-height:2;color:var(--murekkep)}
.atolye-izgara{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,.5vw,9px);padding-right:var(--ref-gut)}
.atolye-adim{position:relative;aspect-ratio:168/93;overflow:hidden;background:#17171A}
.atolye-adim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.atolye-adim .dolgu{position:absolute;inset:0;
  background:linear-gradient(140deg,#32322E 0%,#121210 54%,#060606 100%)}
.atolye-adim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(0,0,0,.62) 100%)}
.atolye-adim .ad{position:absolute;left:clamp(8px,.85vw,14px);bottom:clamp(7px,.75vw,12px);z-index:2;color:#fff}
.atolye-adim .ad b{display:block;font-size:clamp(.78rem,1.08vw,1.1rem);font-weight:300;letter-spacing:.04em;line-height:1.1}
.atolye-adim .ad span{display:block;margin-top:3px;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}

/* ── 7. Koyu footer ───────────────────────────── */
.site-footer{background:#111111;color:rgba(238,236,231,.7);border-top:0;padding:clamp(28px,3.4vw,54px) 0 0}
.site-footer .wrap{max-width:var(--ref-max);padding-inline:var(--ref-gut)}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,.86fr)) minmax(0,1.5fr);
  gap:clamp(18px,2.6vw,46px);padding-bottom:clamp(24px,3vw,44px);border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer .brand.kilit{text-align:left}
.site-footer .brand.kilit .bk-ad{color:#F3F1EC;font-size:clamp(1.1rem,1.5vw,1.55rem)}
.site-footer .brand.kilit .bk-alt{color:rgba(238,236,231,.44);text-indent:.62em}
.site-footer p{color:rgba(238,236,231,.56);font-size:.76rem;line-height:1.75;max-width:36ch;margin:clamp(14px,1.6vw,22px) 0 0}
.site-footer h3{margin:0 0 15px;font-size:.58rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:#F3F1EC}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer ul a{font-size:.76rem;color:rgba(238,236,231,.6);transition:color .3s}
.site-footer ul a:hover{color:#F3F1EC}
.ft-sosyal{display:flex;gap:clamp(12px,1.3vw,20px);margin-top:clamp(16px,2vw,26px)}
.ft-sosyal a{display:inline-flex;color:rgba(238,236,231,.75);transition:color .3s}
.ft-sosyal a:hover{color:#fff}
.ft-sosyal svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.3;fill:none}
.ft-bulten p{margin-top:0;max-width:34ch}
.ft-bulten form{display:flex;border:1px solid rgba(255,255,255,.2);margin-top:clamp(12px,1.4vw,18px)}
.ft-bulten input{flex:1;min-width:0;background:transparent;border:0;color:#F3F1EC;padding:12px 14px;font:inherit;font-size:.74rem}
.ft-bulten input::placeholder{color:rgba(238,236,231,.4)}
.ft-bulten input:focus{outline:0}
.ft-bulten button{background:rgba(255,255,255,.1);color:#F3F1EC;border:0;border-left:1px solid rgba(255,255,255,.2);
  padding:0 18px;cursor:pointer;font-size:.95rem;transition:background .3s}
.ft-bulten button:hover{background:rgba(255,255,255,.2)}
.ft-odeme{display:flex;gap:clamp(14px,2vw,34px);align-items:center;flex-wrap:wrap;margin-top:clamp(16px,2vw,26px)}
.ft-odeme svg{height:21px;width:auto;display:block;opacity:.92}
.site-footer .legal{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  border-top:0;margin-top:0;padding:16px 0 22px;font-size:.68rem;letter-spacing:.03em;color:rgba(238,236,231,.44)}
.site-footer .legal .sag{display:flex;gap:clamp(14px,2vw,30px)}

/* ── 8. Duyarlı ───────────────────────────────── */
@media (max-width:1400px){
  .kol-izgara{grid-template-columns:repeat(4,minmax(0,1fr))}
  .site-footer .cols{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)) minmax(0,1.3fr)}
  .site-footer .cols>div:nth-child(4){grid-column:2/4}
}
@media (max-width:1180px){
  .main-nav ul{gap:12px}
  .main-nav a{font-size:.58rem;letter-spacing:.14em}
}
@media (max-width:1024px){
  .site-header .navbar{grid-template-columns:auto auto;justify-content:space-between}
  .main-nav{position:fixed;inset:0 0 auto 0;background:var(--kagit);padding:80px var(--ref-gut) 30px;
    display:none;justify-self:stretch;border-bottom:1px solid var(--cizgi);z-index:95}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{font-size:.88rem;letter-spacing:.14em;padding:13px 0;display:block;border-bottom:1px solid var(--cizgi-2)}
  .nav-toggle{display:inline-block}

  .ref-hero{aspect-ratio:auto;min-height:0;max-height:none;background:#fff;display:flex;flex-direction:column-reverse}
  .ref-hero::before{display:none}
  .ref-hero canvas,.ref-hero .hero-yedek{position:relative;inset:auto;height:auto;aspect-ratio:4/3}
  .ref-hero .hero-yedek{position:absolute;inset:0;height:100%}
  .hero-sahne{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--studyo)}
  .hero-ic{position:static;padding:clamp(22px,5vw,34px) var(--ref-gut) clamp(16px,3vw,26px)}
  .hero-yazi{max-width:none}
  .hero-not{position:static;text-align:left;margin:10px var(--ref-gut) 0}
  #heroMalzeme{top:auto;bottom:12px;left:12px;right:auto}
  .ref-noir{grid-template-columns:1fr;aspect-ratio:auto;min-height:0}
  .noir-gorsel{aspect-ratio:4/3;height:auto}
  .ref-atolye{grid-template-columns:1fr;gap:12px}
  .atolye-bas{padding-inline:var(--ref-gut);line-height:1.5}
  .atolye-izgara{padding-inline:var(--ref-gut)}
  .kol-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .kat-izgara{grid-template-columns:repeat(2,1fr)}
  .kol-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atolye-izgara{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr}
  .site-footer .cols>div:nth-child(4){grid-column:auto}
  .hero-sayilar div{padding:0 14px}
  .hero-dugmeler .dgm{flex:1 1 100%;justify-content:center}
  .site-footer .legal{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .noir-gorsel .huzme{animation:none}
  .kat-karo img,.kol-gorsel img{transition:none}
}

/* ── 9. Eski düzen düzeltmeleri ───────────────── */
.site-main,body:not(.home) .site-main{padding-top:0}
.woocommerce .wrap,.site-main>.woocommerce{padding-top:clamp(18px,2.4vw,34px)}
body.home .site-header{background:var(--kagit)}