@font-face{font-family:"Archivo Black";src:url("/assets/ArchivoBlack-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* Berenfy — kedi rozetinin renkleri: domates, krem, güneş, mürekkep (+ nane). Sticker / şımarık / eğlenceli. */
:root{--d:#FF4A2E;--d-koyu:#C93A1F;--krem:#FFF6E5;--sari:#FFC93C;--ink:#12163A;--nane:#8EF0C4;--pembe:#FFC2D1;--gri:#4B5168;--beyaz:#fff;--max:1180px;--k:3px solid var(--ink);--g:6px 6px 0 var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--krem);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.dugme,.etiket,.chip,.marka-yazi,.nav-kedi{font-family:"Archivo Black",system-ui,sans-serif;font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,6vw,4rem);line-height:1.02;margin:.2em 0 .3em}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.1;margin:0 0 .35em}
h3{font-size:1.02rem;line-height:1.2;margin:.1em 0 .3em}
.atla{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6em 1em;z-index:30}
.atla:focus{left:8px;top:8px}
:focus-visible{outline:4px solid var(--d);outline-offset:3px;border-radius:6px}
/* duyuru şeridi */
.seri{overflow:hidden;background:var(--ink);color:var(--sari);white-space:nowrap;border-bottom:var(--k)}
.seri-ic{display:inline-flex;animation:kay 46s linear infinite;padding:8px 0}
.seri span{font-family:"Archivo Black",system-ui,sans-serif;font-size:.85rem;letter-spacing:.07em;padding-right:2rem}
@keyframes kay{to{transform:translateX(-50%)}}
/* üst bar */
.ust{position:sticky;top:0;z-index:20;background:var(--krem);border-bottom:var(--k)}
.ust-ic{display:flex;align-items:center;gap:14px;max-width:var(--max);margin:0 auto;padding:8px 16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.logo img{width:46px;height:46px;border-radius:50%;border:var(--k);box-shadow:3px 3px 0 var(--ink);transition:transform .25s}
.logo:hover img{transform:rotate(-14deg) scale(1.08)}
.marka-yazi{font-size:1.55rem;color:var(--d);text-shadow:2px 2px 0 var(--ink);-webkit-text-stroke:1px var(--ink);letter-spacing:.03em}
.ust nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.ust nav a{padding:8px 13px;border-radius:999px;border:3px solid transparent;text-decoration:none;font-weight:800;font-size:.94rem}
.ust nav a:hover{background:var(--sari);border-color:var(--ink)}
.ust nav .nav-kedi{background:var(--d);color:var(--krem);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);animation:zipla 2.6s ease-in-out infinite;font-size:.92rem}
.ust nav .nav-kedi:hover{background:var(--sari);color:var(--ink)}
.nav-kedi small{display:inline-block;background:var(--sari);color:var(--ink);border-radius:999px;padding:0 .45em;margin-left:.35em;font-size:.72rem;line-height:1.5}
@keyframes zipla{0%,86%,100%{transform:translateY(0) rotate(0)}90%{transform:translateY(-5px) rotate(-3deg)}94%{transform:translateY(0) rotate(2deg)}}
.sosyal{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ikon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:var(--k);background:var(--pembe);box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.ikon:hover{transform:translate(-2px,-2px) rotate(-6deg);background:var(--sari)}
.ikon svg{width:22px;height:22px;fill:var(--ink)}
.menu-ac{display:none}
/* düğmeler */
.dugme{display:inline-block;background:var(--sari);color:var(--ink);text-decoration:none;padding:12px 22px;border-radius:999px;font-size:.92rem;line-height:1.1;border:var(--k);box-shadow:4px 4px 0 var(--ink);text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.dugme:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:6px 6px 0 var(--ink);background:var(--nane)}
.dugme:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.dugme.al{background:var(--d);color:var(--krem)}
.dugme.al:hover{background:var(--ink);color:var(--sari)}
.dugme.beyaz{background:var(--beyaz)}
.dugme.koyu{background:var(--ink);color:var(--krem)}
.dugme.koyu:hover{background:var(--sari);color:var(--ink)}
.dugme .kisa{display:none}
.dugme.buyuk{padding:17px 30px;font-size:1.05rem}
/* kahraman */
.kahraman-zemin{background:var(--d);background-image:radial-gradient(circle at 2px 2px,rgba(255,246,229,.22) 2px,transparent 0);background-size:26px 26px;border-bottom:var(--k);position:relative;overflow:hidden}
.kahraman-zemin::before,.kahraman-zemin::after{content:"🐾";position:absolute;font-size:5rem;opacity:.18;transform:rotate(-20deg);pointer-events:none}
.kahraman-zemin::before{left:2%;bottom:6%}
.kahraman-zemin::after{right:46%;top:6%;transform:rotate(25deg)}
.kahraman{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;max-width:var(--max);margin:0 auto;padding:46px 16px 60px;position:relative}
.ust-etiket{display:inline-block;margin:0;background:var(--sari);color:var(--ink);border:var(--k);padding:6px 14px;border-radius:999px;font-family:"Archivo Black",system-ui,sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.kahraman h1{color:var(--krem);text-shadow:4px 4px 0 var(--ink)}
.kahraman h1 span{display:inline-block;color:var(--ink);background:var(--sari);border:var(--k);padding:0 .18em;border-radius:.2em;transform:rotate(-3deg);box-shadow:5px 5px 0 var(--ink);text-shadow:none;margin:.06em .04em}
.alt-baslik{font-size:1.2rem;max-width:36ch;color:var(--krem);font-weight:600}
.dugmeler{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap}
.telefon{position:relative;justify-self:center;width:min(100%,330px);transform:rotate(2deg)}
.telefon video{width:100%;aspect-ratio:9/16;object-fit:cover;border:5px solid var(--ink);border-radius:30px;box-shadow:12px 12px 0 var(--ink);background:var(--ink)}
.rozet{position:absolute;left:-22px;bottom:34px;width:112px;height:112px;border-radius:50%;background:var(--sari);border:var(--k);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;text-align:center;font-family:"Archivo Black",system-ui,sans-serif;font-size:.8rem;line-height:1.05;transform:rotate(-12deg);z-index:2}
/* güven */
.guven{background:var(--nane);border-bottom:var(--k)}
.guven ul{list-style:none;margin:0 auto;padding:16px;max-width:var(--max);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.guven li strong{display:block;font-family:"Archivo Black",system-ui,sans-serif;font-weight:400;font-size:.98rem}
.guven li span{font-size:.9rem}
/* bölümler */
.bolum{max-width:var(--max);margin:0 auto;padding:54px 16px}
.bolum.dar{max-width:780px}
.bolum-alt{color:var(--gri);margin:0 0 26px;font-size:1.05rem;max-width:62ch}
.bolum h2::before{content:"🐾";margin-right:.3em;font-size:.8em}
.bolum.kremsi{background:var(--sari);max-width:none;border-block:var(--k)}
.bolum.kremsi>.ic{max-width:var(--max);margin:0 auto}
/* kedili vitrin */
.vitrin{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* ürün kartı */
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.kart{background:var(--beyaz);border:var(--k);border-radius:20px;box-shadow:var(--g);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;position:relative}
.kart:hover{transform:translate(-3px,-3px) rotate(-.5deg);box-shadow:10px 10px 0 var(--ink)}
.kart-gorsel{display:block;border-bottom:var(--k);background:#f1ece0}
.kart-gorsel img{width:100%;aspect-ratio:2/3;object-fit:cover}
.kart-ic{padding:12px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.kart h3{font-size:.9rem;line-height:1.25;min-height:3.75em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.kart h3 a{text-decoration:none}
.chip{display:inline-block;background:var(--pembe);border:2px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.chip.hoodie{background:var(--nane)}
.chip.tisort{background:var(--sari)}
.kart-alt{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto}
.kart-alt .dugme{padding:10px 12px;font-size:.82rem;box-shadow:3px 3px 0 var(--ink)}
.kart-etiket{position:absolute;top:10px;left:-6px;z-index:2;background:var(--d);color:var(--krem);border:var(--k);padding:2px 12px;font-family:"Archivo Black",system-ui,sans-serif;font-size:.7rem;transform:rotate(-6deg);box-shadow:2px 2px 0 var(--ink)}
/* filtre */
.filtre{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.filtre button{font:inherit;font-family:"Archivo Black",system-ui,sans-serif;font-size:.82rem;background:var(--beyaz);color:var(--ink);border:var(--k);border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.filtre button:hover{transform:translate(-1px,-1px) rotate(-1deg)}
.filtre button[aria-pressed="true"]{background:var(--d);color:var(--krem)}
.kart[hidden]{display:none}
.sayac{font-weight:700;margin:-8px 0 18px;color:var(--gri)}
/* kategori kutuları */
.kategoriler{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kat{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:var(--beyaz);border:var(--k);border-radius:20px;padding:18px;box-shadow:var(--g);transition:transform .15s;position:relative}
.kat:nth-child(4n+1){background:var(--pembe)}.kat:nth-child(4n+2){background:var(--nane)}.kat:nth-child(4n+3){background:var(--sari)}.kat:nth-child(4n+4){background:var(--beyaz)}
.kat:hover{transform:translate(-3px,-3px) rotate(-1.2deg)}
.kat .em{font-size:2.2rem;line-height:1}
.kat strong{font-family:"Archivo Black",system-ui,sans-serif;font-weight:400;font-size:1.05rem;line-height:1.15;margin-top:6px}
.kat span{font-size:.88rem;color:var(--gri)}
.kat.kedi{outline:4px dashed var(--d);outline-offset:3px}
/* video şeridi */
.videolar{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 22px;margin:0 -6px}
.vid{flex:0 0 min(78vw,300px);scroll-snap-align:center;display:flex;flex-direction:column;gap:12px}
.vid video{width:100%;aspect-ratio:9/16;object-fit:cover;border:var(--k);border-radius:24px;box-shadow:var(--g);background:var(--ink)}
.vid:nth-child(odd) video{transform:rotate(-1.2deg)}
.vid:nth-child(even) video{transform:rotate(1.2deg)}
.vid h3{font-size:.98rem;margin:0}
.vid p{margin:0;font-size:.9rem;color:var(--ink)}
.vid .dugme{padding:10px 14px;font-size:.85rem}
.not{font-size:.88rem;color:var(--gri)}
.sari-zemin .not,.kremsi .not{color:var(--ink)}
/* nasıl / sss */
.nasil ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nasil li{display:flex;gap:14px;background:var(--beyaz);border:var(--k);border-radius:20px;padding:18px;box-shadow:var(--g)}
.nasil .no{flex:0 0 46px;height:46px;border-radius:50%;background:var(--d);color:var(--krem);border:var(--k);display:grid;place-items:center;font-family:"Archivo Black",system-ui,sans-serif}
.nasil p{margin:.2em 0 0}
.sss details{background:var(--beyaz);border:var(--k);border-radius:16px;padding:0 18px;margin:0 0 12px;box-shadow:4px 4px 0 var(--ink)}
.sss summary{cursor:pointer;font-weight:800;padding:14px 0;list-style:none}
.sss summary::before{content:"＋";margin-right:.6em;color:var(--d);font-weight:900}
.sss details[open] summary::before{content:"－"}
.sss details p{margin:0 0 14px}
/* ürün sayfası */
.kirinti{max-width:var(--max);margin:0 auto;padding:16px 16px 0;font-size:.9rem;color:var(--gri)}
.kirinti a{text-decoration:none;font-weight:700}
.urun{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.galeri{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.galeri img{width:100%;border:var(--k);border-radius:20px;box-shadow:var(--g);aspect-ratio:2/3;object-fit:cover;background:#fff}
.galeri img:first-child{grid-column:1/-1}
.urun-bilgi h1{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.etiket{display:inline-block;background:var(--sari);border:var(--k);border-radius:999px;padding:3px 14px;font-size:.78rem;text-transform:uppercase;margin:0 8px 8px 0;transform:rotate(-2deg);box-shadow:2px 2px 0 var(--ink);text-decoration:none}
.bedenler{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}
.bedenler span{min-width:46px;text-align:center;border:var(--k);border-radius:12px;padding:4px 10px;font-family:"Archivo Black",system-ui,sans-serif;font-size:.85rem;background:var(--beyaz)}
.lead{font-size:1.15rem}
.ozellik{padding-left:1.2em}
.mini-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.mini{text-decoration:none;display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.85rem}
.mini img{border:var(--k);border-radius:14px;box-shadow:3px 3px 0 var(--ink);aspect-ratio:2/3;object-fit:cover;width:100%}
.bilgi{padding-left:1.1em}
.taslak,.taslak-uyari{background:var(--sari);padding:2px 8px;border-radius:6px}
/* alt */
.alt{background:var(--ink);color:var(--krem);border-top:var(--k);margin-top:30px}
.alt-ic{max-width:var(--max);margin:0 auto;padding:44px 16px 18px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:30px}
.alt a{display:block;text-decoration:none;padding:3px 0;color:var(--krem)}
.alt a:hover{color:var(--sari);text-decoration:underline}
.alt strong{display:block;font-family:"Archivo Black",system-ui,sans-serif;font-weight:400;color:var(--sari);margin-bottom:6px}
.alt p{font-size:.92rem;margin:.3em 0}
.alt .logo-alt{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.alt .logo-alt img{width:56px;height:56px;border-radius:50%;border:3px solid var(--krem)}
.alt .marka-yazi{text-shadow:2px 2px 0 var(--krem);-webkit-text-stroke:1px var(--krem);color:var(--d)}
.telif{max-width:var(--max);margin:0 auto;padding:6px 16px 26px;font-size:.85rem;opacity:.85}
/* orta genişlik: menü sıkışmasın */
@media (min-width:981px) and (max-width:1180px){.ust nav a.gizle-mobil{display:none}.ust nav a{padding:8px 10px}.marka-yazi{font-size:1.35rem}}
/* mobil */
@media (max-width:980px){
 .kahraman{grid-template-columns:1fr;padding-top:34px}
 .telefon{width:min(86%,300px)}
 .vitrin{grid-template-columns:repeat(2,1fr)}
 .kategoriler{grid-template-columns:repeat(2,1fr)}
 .guven ul{grid-template-columns:repeat(2,1fr)}
 .nasil ol{grid-template-columns:1fr}
 .urun{grid-template-columns:1fr}
 .alt-ic{grid-template-columns:1fr 1fr}
 .ust-ic{flex-wrap:wrap;gap:6px 8px}
 .ust nav{order:3;flex:1 0 100%;margin-left:0;justify-content:center;gap:2px}
 .ust nav a{padding:6px 10px;font-size:.85rem}
 .sosyal{margin-left:auto}
}
@media (max-width:560px){
 body{font-size:16px}
 .ust{position:static}
 .ust-ic{padding:6px 12px}
 .logo img{width:38px;height:38px}
 .sosyal .dugme{padding:9px 14px;font-size:.8rem}
 .sosyal .ikon{width:38px;height:38px}
 .dugme .uzun{display:none}
 .dugme .kisa{display:inline}
 .ust nav{padding:0}
 .ust nav .nav-kedi{font-size:.85rem}
 .marka-yazi{font-size:1.25rem}
 .ust nav a.gizle-mobil{display:none}
 .izgara{grid-template-columns:repeat(2,1fr);gap:14px}
 .kart h3{font-size:.8rem}
 .kart-alt{grid-template-columns:1fr}
 .alt-ic{grid-template-columns:1fr}
 .vitrin{gap:12px}
 .bolum{padding:40px 14px}
 .rozet{left:-8px;width:92px;height:92px;font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}