<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kozabiat Tekstil — İçinizdeki Moda</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
/* ===== STICKY HEADER — açılışta şeffaf, scroll'da beyaz ===== */
header{
position:fixed;top:0;left:0;right:0;z-index:50;
background:transparent;
border-bottom:1px solid rgba(255,255,255,.14);
transition:background .4s,border-color .4s,box-shadow .3s;
}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(4,10,14,.6),rgba(4,10,14,0));opacity:1;transition:opacity .4s}
header.scrolled::before{opacity:0}
header.scrolled{
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom-color:var(--line);
box-shadow:0 4px 24px rgba(0,0,0,.05);
}
.h-main{
max-width:1560px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px);
}
.logo{flex-shrink:0}
.logo img{height:46px;width:auto;transition:filter .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{
font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;
position:relative;
}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
}
header.scrolled nav.mn a{color:var(--ink)}
/* satış linkleri — ayraçla ana menüye bitişik */
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;
}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{
background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0;
}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){
nav.mn{display:none}.burger{display:block}
}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer}
@media(max-width:560px){.h-cta{display:none}.logo img{height:38px}.h-main{height:64px}}
/* ===== HERO ===== */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;background:var(--panel)}
.hero .slide{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;z-index:1}
.hero .slide.active{opacity:1;visibility:visible;z-index:2}
.hero .slide .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:contrast(1.03) saturate(1.02)}
.hero .slide.active .bg{animation:heroKen 8s ease-out both}
@keyframes heroKen{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,0) 30%,rgba(5,5,5,.06) 55%,rgba(5,5,5,.66) 100%);pointer-events:none}
.hero-c{position:relative;z-index:2;color:#fff;width:100%;max-width:1480px;margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(64px,9vh,104px);display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hero .slide.active .hero-c{animation:heroContent .9s .12s cubic-bezier(.22,1,.36,1) both}
@keyframes heroContent{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-l .ey{font-size:11px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--sky);margin-bottom:20px}
.hero-l h1{font-weight:500;font-size:clamp(44px,7vw,108px);line-height:1.02;letter-spacing:-.025em}
.hero-l p{margin-top:22px;font-size:clamp(14px,1.2vw,16px);font-weight:400;max-width:44ch;color:rgba(255,255,255,.9);line-height:1.7}
.hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.hero-r .note{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-r .cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:10px;padding:14px 28px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff}
.hero-r .cta:hover{background:transparent;color:#fff;transform:translateY(-2px)}
.hero-nav{position:absolute;left:0;right:0;bottom:clamp(18px,3vh,30px);z-index:6;display:flex;justify-content:center;gap:9px}
.hd{height:30px;min-width:30px;padding:0 9px;border-radius:16px;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font:600 12px/1 var(--mono);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s,min-width .3s,border-color .3s}
.hd:hover{border-color:#fff;background:rgba(0,0,0,.45)}
.hd .pp{display:none;align-items:center;justify-content:center}
.hd .pp svg{fill:currentColor;display:block}
.hd.active{min-width:44px;background:rgba(255,255,255,.95);color:var(--ink);border-color:#fff}
.hd.active .num{display:none}
.hd.active .pp{display:inline-flex}
@media(max-width:760px){.hero-c{flex-direction:column;align-items:flex-start;padding-bottom:clamp(74px,12vh,110px)}.hero-r{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ===== QUOTE / DISCOVER ===== */
.quote{
max-width:980px;margin:0 auto;text-align:center;
padding:clamp(56px,7vw,100px) clamp(20px,4vw,56px);
position:relative;z-index:2;background:var(--bg);
}
.quote .qm{font-size:clamp(48px,5vw,72px);font-weight:500;line-height:.4;color:var(--sky);opacity:.55;display:block;margin-bottom:10px;user-select:none}
.quote .qt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.5em;text-indent:.5em;color:var(--teal);margin-bottom:28px}
.quote h2{font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.5;letter-spacing:-.012em;color:var(--ink)}
/* ===== İSTATİSTİKLER ===== */
.stats{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-in{
max-width:1480px;margin:0 auto;
padding:clamp(42px,5vw,72px) clamp(20px,4vw,56px);
display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,32px);
}
.st{text-align:center}
.st .n{font-weight:300;font-size:clamp(40px,4.4vw,70px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st .n em{font-style:normal;font-weight:300;color:var(--teal)}
.st .l{margin-top:14px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);line-height:1.8}
@media(max-width:1020px){.stats-in{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media(max-width:640px){.stats-in{grid-template-columns:repeat(2,1fr)}}
/* ===== MARKALAR — sticky scroll story ===== */
.sw{height:380vh;position:relative;background:var(--bg)}
.story{position:sticky;top:0;height:100vh;overflow:hidden;transition:background .12s linear}
.s-head{
position:absolute;z-index:5;top:clamp(90px,12vh,120px);left:clamp(20px,6vw,110px);
font-size:13px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--ink);
display:flex;align-items:center;gap:14px;transition:color .35s ease;
}
.s-head::before{content:"";width:32px;height:2px;background:var(--teal);transition:background .35s ease}
/* koyu marka zemininde (ör. Rockhard turuncu) metinleri okunur tut */
.story.dark .s-head{color:#fff}
.story.dark .s-head::before{background:#fff}
.story.dark .si .cat{color:#fff}
.story.dark .si .ix{color:rgba(255,255,255,.62)}
.story.dark .si h3{color:rgba(255,255,255,.94)}
.story.dark .si .go{color:#fff;border-color:#fff}
.story.dark .si .go:hover{color:#fff;border-color:#fff;opacity:.75}
.s-left{
position:absolute;left:0;top:0;bottom:0;width:46%;
display:flex;align-items:flex-start;padding:clamp(160px,21vh,225px) 4vw 0 clamp(20px,6vw,110px);
}
.s-items{position:relative;width:100%;height:46vh;min-height:320px}
.si{
position:absolute;inset:0;display:flex;align-items:flex-start;gap:24px;
opacity:0;will-change:opacity,transform;pointer-events:none;
}
.si.on{pointer-events:auto}
.si .body{display:flex;flex-direction:column;align-items:flex-start}
.si .ix{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:#C4C4C4;flex-shrink:0;align-self:flex-start;margin-top:.2em;transition:color .35s ease}
.si .cat{font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;display:block;transition:color .35s ease}
/* ---- MARKA LOGOSU (gerçek SVG, optik dengeli) ---- */
.si .brand-logo{order:-1;margin-bottom:26px;display:flex;align-items:center;height:clamp(84px,8vw,120px)}
.si .brand-logo img{width:auto}
.si .brand-logo.dom img{height:clamp(112px,10.6vw,166px)} /* SVG'de bol boşluk var, telafi */
.si .brand-logo.rh img{height:clamp(54px,5vw,80px)}
.si .brand-logo.dmk img{height:clamp(52px,4.9vw,78px)}
.si h3{font-weight:500;font-size:clamp(24px,2.2vw,34px);line-height:1.28;letter-spacing:-.015em;color:var(--gray);transition:color .35s ease}
.si .go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:5px;width:fit-content;transition:color .25s,border-color .25s}
.si .go:hover{opacity:1;color:var(--teal);border-color:var(--teal)}
.s-right{
position:absolute;right:0;top:0;bottom:0;width:57%;background:var(--panel);
clip-path:polygon(44px 0%,100% 0%,100% 100%,44px 100%,44px 76%,0% 72.5%,0% 27.5%,44px 24%);
overflow:hidden;
transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.sm{
position:absolute;inset:0;opacity:0;
will-change:opacity,transform;
}
.sm img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.sm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,0) 40%,rgba(5,5,5,.28) 100%)}
.sm .tg{position:absolute;z-index:3;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px}
.sm .tg::before{content:"·";font-size:18px;line-height:0}
.sm .t1{left:8%;bottom:14%}.sm .t2{right:8%;top:16%;color:var(--sky)}
.sp{position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:10px}
.sp .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,height .3s,border-radius .3s}
.sp .d.on{background:var(--sky);height:22px;border-radius:4px}
@media(max-width:900px){
.sw{height:auto}
.story{position:relative;height:auto;overflow:visible}
.s-head{position:relative;top:auto;left:auto;padding:100px clamp(20px,5vw,40px) 0}
.s-left{position:relative;width:100%;padding:28px clamp(20px,5vw,40px) 0;display:block}
.s-items{height:auto;min-height:0}
.si{position:relative;opacity:1!important;transform:none!important;pointer-events:auto;margin-bottom:28px;align-items:flex-start;transition:none}
.s-right,.sp{display:none}
.mm{display:block;overflow:hidden;aspect-ratio:4/5;margin:18px 0 40px;background:var(--panel);clip-path:polygon(24px 0%,100% 0%,100% 100%,24px 100%,24px 78%,0% 75%,0% 25%,24px 22%)}
.mm img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.si .brand-logo{height:64px}
.si .brand-logo.dom img{height:90px}
.si .brand-logo.rh img{height:42px}
.si .brand-logo.dmk img{height:40px}
}
@media(min-width:901px){.mm{display:none}}
/* ===== REFERANSLAR — marquee ===== */
.refs{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(44px,5vw,72px) 0;overflow:hidden}
.refs .rh{text-align:center;margin-bottom:clamp(30px,3.5vw,48px);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gray)}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mt{display:flex;align-items:center;gap:clamp(56px,7vw,110px);width:max-content;animation:ms 38s linear infinite}
.mq:hover .mt{animation-play-state:paused}
.mt img{height:clamp(24px,2.4vw,36px);width:auto;filter:grayscale(1) contrast(1.05);opacity:.5;transition:opacity .3s,filter .3s}
.mt img:hover{opacity:1;filter:grayscale(0) contrast(1)}
@keyframes ms{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ===== SATIŞ KANALLARI ===== */
.ch{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ch-in{max-width:1480px;margin:0 auto;padding:clamp(56px,7vw,100px) clamp(20px,4vw,56px)}
.ch-h{text-align:center;margin-bottom:clamp(30px,3.5vw,48px)}
.ch-h .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.ch-h h2{font-weight:400;font-size:clamp(28px,3.4vw,50px);line-height:1.1;letter-spacing:-.02em}
.ch-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.cc{border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);transition:background .35s,color .35s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.cc-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d1416}
.cc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1);filter:grayscale(.12) contrast(1.02)}
.cc:hover .cc-img img{transform:scale(1.05)}
.cc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.32));pointer-events:none}
.cc-b{padding:clamp(28px,3.2vw,46px);display:flex;flex-direction:column;gap:12px;flex:1}
.cc:hover{background:var(--ink);color:#fff;transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,14,14,.14)}
.cc .tg{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gray);transition:color .35s}
.cc:hover .tg{color:rgba(255,255,255,.55)}
.cc h3{font-weight:500;font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.02em}
.cc p{font-size:14px;line-height:1.7;color:var(--gray);font-weight:400;max-width:42ch;transition:color .35s}
.cc:hover p{color:rgba(255,255,255,.7)}
.cc .go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.cc .go .ar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:14px;transition:background .35s,color .35s,transform .3s}
.cc:hover .go .ar{background:#fff;color:var(--ink);transform:translateX(4px)}
@media(max-width:760px){.ch-g{grid-template-columns:1fr}}
/* ===== HAKKIMIZDA — statement ===== */
.stmt{max-width:1000px;margin:0 auto;padding:clamp(80px,10vw,150px) clamp(20px,4vw,56px);text-align:center;position:relative;z-index:2;background:var(--bg)}
.stmt .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:28px}
.stmt p{font-weight:400;font-size:clamp(22px,2.8vw,38px);line-height:1.45;letter-spacing:-.015em}
.stmt .more{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:6px;transition:opacity .2s}
.stmt .more:hover{opacity:.5}
/* ===== INDITEX FOOTER ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{
max-width:1480px;margin:0 auto;
padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);
display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px);
}
.ft-col .ft-title{
font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block;
}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{
max-width:1480px;margin:0 auto;
padding:20px clamp(20px,4vw,56px) 28px;
border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray);
}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ===== DÜNYADA KOZABİAT — etiketli harita ===== */
.gmap{position:relative;background:var(--bg);color:var(--ink);z-index:2;padding-top:clamp(52px,7vw,92px)}
.gmap-head{max-width:760px;margin:0 auto clamp(26px,3.2vw,44px);padding:0 clamp(20px,4vw,56px);text-align:center}
.gmap-head .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.gmap-head h2{font-weight:400;font-size:clamp(28px,3.6vw,50px);line-height:1.08;letter-spacing:-.02em}
.gmap-head p{margin:18px auto 0;max-width:52ch;font-size:clamp(14px,1.15vw,16px);line-height:1.7;color:var(--gray)}
.gmap-band{background:#011131;padding:clamp(30px,4vw,56px) clamp(20px,4vw,56px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gmap-img{max-width:1080px;margin:0 auto}
.gmap-img img{width:100%;height:auto;display:block}
/* ============ YÖNETİM PANELİ (gizli, #admin ile açılır) ============ */
.adm-bar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);z-index:9999;
display:flex;align-items:center;gap:16px;background:rgba(10,19,21,.94);backdrop-filter:blur(14px);
color:#fff;padding:13px 16px 13px 22px;border-radius:16px;border:1px solid rgba(116,201,227,.28);
box-shadow:0 20px 60px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.22,1,.36,1);
font-family:var(--sans);max-width:calc(100vw - 32px)}
body.admin .adm-bar{transform:translateX(-50%) translateY(0)}
.adm-bar .adm-dot{width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 10px var(--sky);flex-shrink:0}
.adm-bar .adm-t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.adm-bar .adm-t small{display:block;font-size:10px;font-weight:400;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.5);margin-top:2px}
.adm-bar .adm-sep{width:1px;height:30px;background:rgba(255,255,255,.14);flex-shrink:0}
.adm-btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:none;
border-radius:10px;padding:11px 18px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap;font-family:var(--sans)}
.adm-btn:hover{background:#0f7684;transform:translateY(-1px)}
.adm-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85)}
.adm-btn.ghost:hover{background:rgba(255,255,255,.08)}
/* düzenlenebilir görsel işaretleri */
body.admin [data-slot]{cursor:pointer}
body.admin .edit-wrap{position:relative;outline:2px dashed rgba(116,201,227,.55);outline-offset:-2px}
.edit-tag{position:absolute;z-index:50;top:12px;left:12px;display:none;align-items:center;gap:7px;
background:rgba(10,19,21,.92);color:#fff;padding:9px 14px;border-radius:9px;font-family:var(--sans);
font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
border:1px solid rgba(116,201,227,.4);transition:background .2s;pointer-events:auto}
.edit-tag:hover{background:var(--teal)}
body.admin .edit-wrap .edit-tag{display:inline-flex}
.hero .edit-tag{top:auto;bottom:120px}
.adm-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:10000;
background:var(--teal);color:#fff;padding:12px 22px;border-radius:10px;font-family:var(--sans);font-size:13px;
font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.adm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){
.adm-bar{flex-wrap:wrap;gap:10px;padding:12px 14px;left:16px;right:16px;transform:translateY(140%)}
body.admin .adm-bar{transform:translateY(0)}
.adm-bar .adm-sep{display:none}
}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- mobilde marka/magaza karti: gorsel ustte, baslik gorselin uzerinde ---- */
.mm-wrap{display:contents}
.mm-cap{display:none}
@media(max-width:900px){
.si{display:flex;flex-direction:column;margin-bottom:38px}
.si>.body,.si .body{display:flex;flex-direction:column}
.si .ix{display:none}
.mm-wrap{display:block;position:relative;order:-1;width:100%;
margin:0 0 20px;border-radius:16px;overflow:hidden;background:#0d1416}
.mm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 48%,rgba(8,12,14,.74) 100%)}
.mm-wrap .mm,.mm-wrap img.mm{display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;margin:0;clip-path:none;border-radius:0;min-height:0;max-height:none}
.mm-wrap .mm img{width:100%;height:100%;object-fit:cover}
.mm-cap{display:block;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* metin blogu rahat aksin */
.si .cat{margin-bottom:10px}
.si h3{font-size:clamp(19px,5.2vw,24px);line-height:1.35}
.si .brand-logo{margin:0 0 14px}
.s-meta .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.s-meta .row .k{font-size:10px;letter-spacing:.2em}
.s-meta .row .v{font-size:14px;line-height:1.55}
}
/* ---- hero gorselleri: mobilde daha dengeli kadraj ---- */
@media(max-width:640px){
.hero{min-height:min(74vh,620px)}
.hero img.bg,.hero video.bg,.hero .bg{object-position:center center}
.hero-l h1{font-size:clamp(32px,9.5vw,46px)}
.hero-l p{font-size:14px;max-width:100%}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="#" class="logo"><img src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="#" class="active">Anasayfa</a></li>
<li><a href="#hk">Hakkımızda</a></li>
<li><a href="#mk">Markalarımız</a></li>
<li><a href="#">Sertifikalarımız</a></li>
<li><a href="#">Mağazalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="#" class="h-cta">İletişim</a>
<button class="burger" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="#">Anasayfa</a></li><li><a href="#hk">Hakkımızda</a></li>
<li><a href="#mk">Markalarımız</a></li><li><a href="#">Sertifikalarımız</a></li>
<li><a href="#">Mağazalarımız</a></li><li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<section class="hero" id="hero">
<div class="slide active">
<img data-kb-m="anasayfa1" class="bg" data-slot="hero" src="/media/16c77584aa1c9fa861df6e559aeff82b2b1f13cfe3f693613d756195c97f49e9.jpg" alt="Kozabiat">
<div class="hero-c">
<div class="hero-l">
<div class="ey">1996'dan beri</div>
<h1>İçinizdeki Moda</h1>
<p>Türkiye'nin üretim gücünü Ortadoğu, Asya ve Avrupa'da temsil eden iç giyim ve pijama üreticisi.</p>
</div>
<div class="hero-r">
<div class="note">Sonbahar — Kış '26</div>
<a href="#mk" class="cta">Keşfet →</a>
</div>
</div>
</div>
<div class="slide" data-copyfrom="dominant">
<img class="bg" alt="Dominant">
<div class="hero-c">
<div class="hero-l">
<div class="ey">Aile Markalarımız</div>
<h1>Dominant</h1>
<p>Modern tasarımları ve kaliteli malzemeleriyle öne çıkan iç giyim markamız.</p>
</div>
<div class="hero-r">
<div class="note">Kadın & İç Giyim</div>
<a href="https://www.kozabiat.com/dominant/" class="cta">Keşfet →</a>
</div>
</div>
</div>
<div class="slide" data-copyfrom="rockhard">
<img class="bg" alt="Rockhard">
<div class="hero-c">
<div class="hero-l">
<div class="ey">Aile Markalarımız</div>
<h1>Rockhard</h1>
<p>Erkekler için modern tasarım ve kaliteli malzemeyle öne çıkan iç giyim markamız.</p>
</div>
<div class="hero-r">
<div class="note">Erkek İç Giyim</div>
<a href="https://www.kozabiat.com/rockhard/" class="cta">Keşfet →</a>
</div>
</div>
</div>
<div class="slide" data-copyfrom="domikids">
<img class="bg" alt="Domikids">
<div class="hero-c">
<div class="hero-l">
<div class="ey">Aile Markalarımız</div>
<h1>Domikids</h1>
<p>Çocukların rahat ve özgür hissedebileceği rengârenk iç giyim markamız.</p>
</div>
<div class="hero-r">
<div class="note">Çocuk</div>
<a href="https://www.kozabiat.com/domikids/" class="cta">Keşfet →</a>
</div>
</div>
</div>
<div class="slide">
<img data-kb-m="anasayfa2" class="bg" data-slot="herowho" src="https://picsum.photos/seed/kozabiz/2400/1500" alt="Biz Kimiz">
<div class="hero-c">
<div class="hero-l">
<div class="ey">Kurumsal</div>
<h1>Biz Kimiz?</h1>
<p>1996'dan beri iki fabrika, üç marka ve 500 kişilik ekiple Türkiye'nin üretim gücü.</p>
</div>
<div class="hero-r">
<div class="note">Hakkımızda</div>
<a href="https://www.kozabiat.com/hakkimizda.html" class="cta">Keşfet →</a>
</div>
</div>
</div>
<div class="slide">
<img data-kb-m="anasayfa3" class="bg" data-slot="herofilm" src="https://picsum.photos/seed/kozafilm/2400/1500" alt="Tanıtım Filmleri">
<div class="hero-c">
<div class="hero-l">
<div class="ey">Medya</div>
<h1>Tanıtım Filmleri</h1>
<p>Kozabiat'ı yakından tanıyın; üretimin ve markalarımızın hikâyesine göz atın.</p>
</div>
<div class="hero-r">
<div class="note">Video</div>
<a href="https://www.kozabiat.com/haberler/" class="cta">Göz At →</a>
</div>
</div>
</div>
<div class="hero-nav" role="tablist" aria-label="Hero slaytları">
<button class="hd active" aria-label="Slayt 1"><span class="num">1</span><span class="pp"></span></button>
<button class="hd" aria-label="Slayt 2"><span class="num">2</span><span class="pp"></span></button>
<button class="hd" aria-label="Slayt 3"><span class="num">3</span><span class="pp"></span></button>
<button class="hd" aria-label="Slayt 4"><span class="num">4</span><span class="pp"></span></button>
<button class="hd" aria-label="Slayt 5"><span class="num">5</span><span class="pp"></span></button>
<button class="hd" aria-label="Slayt 6"><span class="num">6</span><span class="pp"></span></button>
</div>
</section>
<section class="quote reveal">
<span class="qm">“</span>
<div class="qt">DISCOVER THE POTENTIAL</div>
<h2>1996'dan bu yana taşıdığımız üretim mirası, geleceğe bakışımızın temelini oluşturuyor. Her dikişte otuz yıllık ustalık; üç markada, üç kıtada, sonsuz olasılıkta.</h2>
</section>
<section class="stats">
<div class="stats-in">
<div class="st reveal"><div class="n"><span class="cnt" data-t="500" data-f="r">0</span><em>+</em></div><div class="l">Çalışan</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="50" data-f="r">0</span><em>+</em></div><div class="l">İhracat Yapılan Ülke</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="2000000" data-f="m">0</span><em>+</em></div><div class="l">Adet Üretim Kapasitesi</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="2" data-f="r">0</span></div><div class="l">Fabrika</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="3" data-f="r">0</span></div><div class="l">Marka Altında Binlerce Ürün</div></div>
</div>
</section>
<div class="sw" id="mk">
<section class="story" id="story">
<div class="s-head">Markalarımız</div>
<div class="s-left"><div class="s-items">
<div class="si" data-i="0"><span class="ix">0 1</span><div class="body"><span class="cat">Kadın Koleksiyonları</span><div class="brand-logo dom"><img src="/media/6e56db5776beb7fe465d89173ad0b113364896fcda9e59332184656a870cf604.svg" alt="Dominant"></div><h3>Kadın iç giyiminde rahatlık, şıklık ve modern koleksiyonlar. Günlük konforu zarafetle buluşturan ana markamız.</h3><a href="markalarimiz.html" class="go">Koleksiyonu Gör →</a><div class="mm-wrap"><div class="mm"><img data-kb-m="anasayfa4" data-slot="dominant" src="/media/a665df72ae69f0bdfd7c403cfa7ed154a36a7d725c96bb838be09a05946cb536.jpg" alt="Dominant"></div><span class="mm-cap">Dominant</span></div></div></div>
<div class="si" data-i="1"><span class="ix">0 2</span><div class="body"><span class="cat">Erkek Koleksiyonları</span><div class="brand-logo rh"><img src="/media/0d0c9578cd62ddbffe41e85875d09db9f395c75b8e3ebec7f31c5ac31c73048c.png" alt="Rockhard"></div><h3>Erkek iç giyiminde konfor, kalite ve güçlü tasarım dili. Genç ve dinamik kuşağın markası.</h3><a href="markalarimiz.html" class="go">Koleksiyonu Gör →</a><div class="mm-wrap"><div class="mm"><img data-kb-m="anasayfa5" data-slot="rockhard" src="/media/591537d3cceb8658d190ad47eb42ab66864f9a088fa0c1bb5152bc7745579ecf.jpg" alt="Rockhard"></div><span class="mm-cap">Rockhard</span></div></div></div>
<div class="si" data-i="2"><span class="ix">0 3</span><div class="body"><span class="cat">Çocuk Koleksiyonları</span><div class="brand-logo dmk"><img src="/media/0fcdf574be7e34887ad5127a929f55d1ccebb6b3e1405e6f001d904a57e4e4d4.svg" alt="Domikids"></div><h3>Çocuk iç giyiminde renkli, güvenilir ve rahat ürünler. Yumuşak dokular, güvenli kumaşlar.</h3><a href="markalarimiz.html" class="go">Koleksiyonu Gör →</a><div class="mm-wrap"><div class="mm"><img data-kb-m="anasayfa6" data-slot="domikids" src="/media/d62fbd9f195a0893953800a67a2e153ff20ff78194a11e76b44cdb8f5f8edd0e.jpg" alt="Domikids"></div><span class="mm-cap">Domikids</span></div></div></div>
</div></div>
<div class="s-right" id="sr">
<div class="sm" data-i="0"><img data-kb-m="anasayfa7" data-slot="dominant" src="/media/a665df72ae69f0bdfd7c403cfa7ed154a36a7d725c96bb838be09a05946cb536.jpg" alt="Dominant"><span class="tg t1">Dominant</span><span class="tg t2">Kadın — SS '26</span></div>
<div class="sm" data-i="1"><img data-kb-m="anasayfa8" data-slot="rockhard" src="/media/591537d3cceb8658d190ad47eb42ab66864f9a088fa0c1bb5152bc7745579ecf.jpg" alt="Rockhard"><span class="tg t1">Rockhard</span><span class="tg t2">Erkek — SS '26</span></div>
<div class="sm" data-i="2"><img data-kb-m="anasayfa9" data-slot="domikids" src="/media/d62fbd9f195a0893953800a67a2e153ff20ff78194a11e76b44cdb8f5f8edd0e.jpg" alt="Domikids"><span class="tg t1">Domikids</span><span class="tg t2">Çocuk — SS '26</span></div>
<div class="sp" id="sp"><span class="d"></span><span class="d"></span><span class="d"></span></div>
</div>
</section>
</div>
<section class="refs">
<div class="rh">Referanslarımız</div>
<div class="mq"><div class="mt">
<img data-kb-m="anasayfa10" src="https://www.kozabiat.com/uploads/genelresim/b_columbia_95720.png" alt="Columbia">
<img data-kb-m="anasayfa11" src="https://www.kozabiat.com/uploads/genelresim/b_boyner_51133.png" alt="Boyner">
<img data-kb-m="anasayfa12" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8103.png" alt="T-box">
<img data-kb-m="anasayfa13" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8102.png" alt="Limon Company">
<img data-kb-m="anasayfa14" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72210.png" alt="Amazon">
<img data-kb-m="anasayfa15" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_85423.png" alt="Pierre Cardin">
<img data-kb-m="anasayfa16" src="https://www.kozabiat.com/uploads/genelresim/b_lc_waikiki_51135.png" alt="LC Waikiki">
<img data-kb-m="anasayfa17" src="https://www.kozabiat.com/uploads/genelresim/b_trendyol_51134.png" alt="Trendyol">
<img data-kb-m="anasayfa18" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_93040.png" alt="Colin's">
<img data-kb-m="anasayfa19" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72211.png" alt="Koton">
<img data-kb-m="anasayfa20" src="https://www.kozabiat.com/uploads/genelresim/b_defacto_67491.png" alt="DeFacto">
<img data-kb-m="anasayfa21" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_16230.jpg" alt="A101">
<img data-kb-m="anasayfa22" src="https://www.kozabiat.com/uploads/genelresim/b_columbia_95720.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa23" src="https://www.kozabiat.com/uploads/genelresim/b_boyner_51133.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa24" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8103.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa25" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8102.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa26" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72210.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa27" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_85423.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa28" src="https://www.kozabiat.com/uploads/genelresim/b_lc_waikiki_51135.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa29" src="https://www.kozabiat.com/uploads/genelresim/b_trendyol_51134.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa30" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_93040.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa31" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72211.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa32" src="https://www.kozabiat.com/uploads/genelresim/b_defacto_67491.png" alt="" aria-hidden="true">
<img data-kb-m="anasayfa33" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_16230.jpg" alt="" aria-hidden="true">
</div></div>
</section>
<!-- ===== DÜNYADA KOZABİAT ===== -->
<section class="gmap">
<div class="gmap-head reveal">
<div class="ey">Küresel Ağ</div>
<h2>Dünyada Kozabiat</h2>
<p>Üç kıtada, elliden fazla ülkede. Türkiye'nin üretim gücünü Orta Doğu, Asya ve Avrupa'ya taşıyoruz.</p>
</div>
<div class="gmap-band reveal">
<div class="gmap-img">
<img data-kb-m="anasayfa34" data-slot="worldmap" src="/media/3aa49662d7a68142963a50d892b6ccab99b00dadb69f1cf479fe7523b4452599.png" alt="Kozabiat'ın ihracat yaptığı ülkeler">
</div>
</div>
</section>
<section class="ch">
<div class="ch-in">
<div class="ch-h reveal"><div class="ey">Size Nasıl Ulaşalım</div><h2>Alışverişinizi seçin</h2></div>
<div class="ch-g">
<a href="https://b2b.kozabiat.com" target="_blank" class="cc reveal"><div class="cc-img"><img data-kb-m="anasayfa35" data-slot="toptan" src="https://picsum.photos/seed/kozatoptan/1200/750" alt="Toptan Satış"></div><div class="cc-b"><span class="tg">B2B — Bayiler İçin</span><h3>Toptan Satış</h3><p>Bayilerimize özel B2B platformumuzda güncel koleksiyonlara, stok durumuna ve özel fiyatlara ulaşın.</p><span class="go">B2B Platformuna Git <span class="ar">→</span></span></div></a>
<a href="https://dominantshop.com" target="_blank" class="cc reveal"><div class="cc-img"><img data-kb-m="anasayfa36" data-slot="perakende" src="https://picsum.photos/seed/kozaperakende/1200/750" alt="Perakende Satış"></div><div class="cc-b"><span class="tg">B2C — Bireysel Alışveriş</span><h3>Perakende Satış</h3><p>Tüm markalarımızın koleksiyonlarını online mağazamızdan keşfedin, kapınıza gelsin.</p><span class="go">Online Mağazaya Git <span class="ar">→</span></span></div></a>
</div>
</div>
</section>
<section class="stmt" id="hk">
<div class="ey reveal">Biz Kimiz</div>
<p class="reveal">Türkiye'nin potansiyelini her dikişte işliyor, üç markayla üç kıtaya taşıyoruz.</p>
<a href="hakkimizda.html" class="more reveal">Detaylı Bilgi →</a>
</section>
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hakkimizda.html">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html">Dominant</a></li>
<li><a href="markalarimiz.html">Rockhard</a></li>
<li><a href="markalarimiz.html">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html">Basın</a></li>
<li><a href="medya.html">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<script>
(function(){
const R=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
const H=document.getElementById('hdr');
const C=(v,a,b)=>Math.min(b,Math.max(a,v));
const P=(p,s,e)=>C((p-s)/(e-s),0,1);
const E=t=>1-Math.pow(1-t,3);
window.addEventListener('scroll',()=>H.classList.toggle('scrolled',window.scrollY>40),{passive:true});
/* STORY — scroll'a birebir bağlı; reduced-motion'da interpolasyon anlık */
{
const W=document.getElementById('mk');
const I=[...document.querySelectorAll('.si')];
const M=[...document.querySelectorAll('.sm')];
const D=[...document.querySelectorAll('#sp .d')];
const panel=document.getElementById('sr');
const story=document.getElementById('story');
/* her markanın fotoğraf arka plan rengi (birebir örneklendi) */
/* Varsayilanlar; asagida gercek gorsellerden hesaplanip guncellenir. */
const COLS=[[241,242,237],[206,76,26],[231,219,200]];
/* Bir gorselin BASKIN rengini bul: 64x64'e kucult, renkleri kovalara ay,
en kalabalik kovanin ortalamasini dondur. */
function dominantColor(el){
try{
const w=el.naturalWidth||el.videoWidth, h=el.naturalHeight||el.videoHeight;
if(!w||!h) return null;
const cv=document.createElement('canvas'); cv.width=64; cv.height=64;
const cx=cv.getContext('2d',{willReadFrequently:true});
cx.drawImage(el,0,0,64,64);
const d=cx.getImageData(0,0,64,64).data;
const bins={};
for(let i=0;i<d.length;i+=4){
if(d[i+3]<128) continue;
const key=((d[i]>>4)<<8)|((d[i+1]>>4)<<4)|(d[i+2]>>4);
const b=bins[key]||(bins[key]=[0,0,0,0]);
b[0]+=d[i]; b[1]+=d[i+1]; b[2]+=d[i+2]; b[3]++;
}
let best=null;
for(const k in bins){ if(!best||bins[k][3]>best[3]) best=bins[k]; }
if(!best||!best[3]) return null;
return [Math.round(best[0]/best[3]),Math.round(best[1]/best[3]),Math.round(best[2]/best[3])];
}catch(e){ return null; }
}
function syncBrandColors(){
const media=Array.prototype.slice.call(document.querySelectorAll('.sm')).
map(function(w){ return w.querySelector('img,video'); });
media.forEach(function(el,i){
if(!el||i>=COLS.length) return;
const run=function(){ const c=dominantColor(el); if(c) COLS[i]=c; };
if(el.tagName==='VIDEO'){
if(el.readyState>=2) run(); else el.addEventListener('loadeddata',run,{once:true});
}else if(el.complete&&el.naturalWidth){ run(); }
else { el.addEventListener('load',run,{once:true}); }
});
}
syncBrandColors();
const N=I.length;
const mob=()=>window.innerWidth<=900;
let sm=0,run=false,lastY=window.scrollY,vel=0;
const smoothstep=t=>t*t*(3-2*t); // yumuşak S-eğrisi
// scroll pozisyonundan 0..N-1 arası kesirli index üretir
function tgt(){
const total=W.offsetHeight-window.innerHeight;
const p=C(-W.getBoundingClientRect().top/total,0,1);
return p*(N-1); // 0 → ilk marka, N-1 → son marka (tam aralık kullanılır)
}
function draw(s){
// her eleman kendi index'ine olan mesafeye göre görünür — süreklilik garantili
I.forEach((el,k)=>{
const d=Math.abs(k-s); // bu markaya uzaklık
const o=C(1-d*1.35,0,1); // yakınsa görünür, uzaksa solar
const oe=smoothstep(o);
el.style.opacity=oe;
el.style.transform=`translateY(${(k-s)*46}px)`; // alttan üste kayar
el.style.pointerEvents=oe>.6?'auto':'none';
el.classList.toggle('on',oe>.6);
});
M.forEach((el,k)=>{
const d=Math.abs(k-s);
let o;
if(k<=Math.floor(s)) o=1; // geçilenler altta durur
else o=C(1-d,0,1); // gelmekte olan biner
const oe=smoothstep(C(o,0,1));
el.style.opacity=oe;
el.style.transform=`translateY(${(1-oe)*4}%) scale(${1+(1-oe)*.03})`;
el.style.zIndex=k;
});
const active=Math.round(s);
D.forEach((d,k)=>d.classList.toggle('on',k===active));
/* sol panel = aktif markanın fotoğraf zemin rengi (scroll'da yumuşak geçiş) */
if(!mob()){
const i0=C(Math.floor(s),0,N-1),i1=C(i0+1,0,N-1),f=s-i0;
const m=COLS[i0].map((c,j)=>Math.round(c+(COLS[i1][j]-c)*f));
story.style.background=`rgb(${m[0]},${m[1]},${m[2]})`;
const lum=(m[0]*299+m[1]*587+m[2]*114)/1000; // koyu zeminde yazıları beyaza çevir
story.classList.toggle('dark',lum<150);
/* çentik scroll'a bağlı akar: ilk marka yukarıda → son marka aşağıda */
const nc=26+(N>1?s/(N-1):0)*48;
panel.style.clipPath=`polygon(44px 0%,100% 0%,100% 100%,44px 100%,44px ${(nc+26).toFixed(2)}%,0% ${(nc+22.5).toFixed(2)}%,0% ${(nc-22.5).toFixed(2)}%,44px ${(nc-26).toFixed(2)}%)`;
}else{story.style.background='';story.classList.remove('dark');panel.style.clipPath='';}
}
function loop(){
const t=tgt();
if(R) sm=t;
else{
sm+=(t-sm)*.14;
if(Math.abs(t-sm)<.0002)sm=t;
}
draw(sm);
const y=window.scrollY;
if(R){panel.style.transform='';}
else{
vel+=((y-lastY)-vel)*.12;lastY=y;
panel.style.transform=`translateY(${C(vel*-.18,-22,22)}px)`;
}
if(nv())requestAnimationFrame(loop);
else{run=false;panel.style.transform=''}
}
function nv(){const r=W.getBoundingClientRect();return r.bottom>0&&r.top<innerHeight}
function wake(){if(!mob()&&!run&&nv()){run=true;requestAnimationFrame(loop)}}
window.addEventListener('scroll',wake,{passive:true});
window.addEventListener('resize',wake);
wake();draw(0);
}
/* SAYAÇLAR */
const fm={m:v=>v>=1e6?Math.round(v/1e6)+'M':v>=1e3?Math.round(v/1e3)+'K':Math.round(v),r:v=>Math.round(v)};
function cu(el){
const tg=+el.dataset.t,f=fm[el.dataset.f]||fm.r;
if(R){el.textContent=f(tg);return}
const d=2000,t0=performance.now();
(function tk(t){const p=Math.min((t-t0)/d,1),e=1-Math.pow(1-p,3);el.textContent=f(tg*e);if(p<1)requestAnimationFrame(tk);else el.textContent=f(tg)})(t0);
}
const ci=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){cu(x.target);ci.unobserve(x.target)}}),{threshold:.35});
document.querySelectorAll('.cnt').forEach(el=>ci.observe(el));
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.15});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
document.querySelectorAll('#mn a').forEach(a=>a.addEventListener('click',()=>document.getElementById('mn').classList.remove('open')));
})();
</script>
<script>
(function(){
var hero=document.getElementById('hero'); if(!hero)return;
var slides=Array.prototype.slice.call(hero.querySelectorAll('.slide'));
var dots=Array.prototype.slice.call(hero.querySelectorAll('.hd'));
if(slides.length<2)return;
slides.forEach(function(s){
var cf=s.getAttribute('data-copyfrom');
if(cf){var src=document.querySelector('[data-slot="'+cf+'"]');var img=s.querySelector('.bg');if(src&&img&&src.getAttribute('src'))img.src=src.getAttribute('src');}
});
var PAUSE='<svg width="11" height="11" viewBox="0 0 11 11"><rect x="1.7" y="1" width="2.5" height="9" rx="0.6"></rect><rect x="6.8" y="1" width="2.5" height="9" rx="0.6"></rect></svg>';
var PLAY='<svg width="11" height="11" viewBox="0 0 11 11"><path d="M2.6 1 L9.4 5.5 L2.6 10 Z"></path></svg>';
var cur=0, playing=true, timer=null, DUR=6000;
var RM=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
function render(){
slides.forEach(function(s,i){s.classList.toggle('active',i===cur);});
dots.forEach(function(d,i){
var on=(i===cur); d.classList.toggle('active',on);
var pp=d.querySelector('.pp'); if(pp&&on) pp.innerHTML=playing?PAUSE:PLAY;
});
}
/* Slide'da video varsa: sabit sure yerine VIDEO BITINCE gecilir. */
function mediaOf(i){ return slides[i] ? slides[i].querySelector('video') : null; }
function stopAll(){
slides.forEach(function(s){
var v=s.querySelector('video');
if(v){ try{ v.pause(); v.onended=null; }catch(e){} }
});
}
function schedule(){
clearTimeout(timer);
if(!playing||RM) return;
var v=mediaOf(cur);
if(v){
v.loop=false; /* yoksa hic bitmez */
v.muted=true; v.playsInline=true;
v.onended=function(){ if(playing) go(cur+1); };
try{ v.currentTime=0; }catch(e){}
var pr=v.play();
if(pr&&pr.catch) pr.catch(function(){
/* otomatik oynatma engellenirse normal sureye don */
timer=setTimeout(function(){go(cur+1);},DUR);
});
return;
}
timer=setTimeout(function(){go(cur+1);},DUR);
}
function go(i){stopAll(); cur=(i+slides.length)%slides.length; render(); schedule();}
function play(){playing=true; render(); schedule();}
function pause(){playing=false; clearTimeout(timer); var v=mediaOf(cur); if(v){try{v.pause();}catch(e){}} render();}
dots.forEach(function(d,i){d.addEventListener('click',function(){ if(i===cur){ playing?pause():play(); } else { go(i); } });});
document.addEventListener('visibilitychange',function(){ if(document.hidden){clearTimeout(timer);} else if(playing){schedule();} });
if(RM) playing=false;
render(); schedule();
})();
</script>
<!-- ============ YÖNETİM PANELİ ============ -->
<div class="adm-bar" id="admBar">
<span class="adm-dot"></span>
<span class="adm-t">Düzenleme Modu<small>Görsellerin üstündeki "Değiştir"e tıkla</small></span>
<span class="adm-sep"></span>
<button class="adm-btn" id="admDownload">↓ Siteyi İndir</button>
<button class="adm-btn ghost" id="admExit">Kapat</button>
</div>
<div class="adm-toast" id="admToast"></div>
<input type="file" id="admFile" accept="image/*" style="display:none">
<script>
(function(){
const body=document.body, bar=document.getElementById('admBar');
const fileInput=document.getElementById('admFile'), toast=document.getElementById('admToast');
let activeSlot=null;
const slotNames={hero:'Hero Banner',dominant:'Dominant Görseli',rockhard:'Rockhard Görseli',domikids:'Domikids Görseli',worldmap:'Dünya Haritası',herowho:'Hero — Biz Kimiz',herofilm:'Hero — Tanıtım',toptan:'Toptan Görseli',perakende:'Perakende Görseli'};
function showToast(msg){toast.textContent=msg;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),2600);}
// Düzenlenebilir görselleri sarmalayıp "Değiştir" etiketi ekle
function setupEditables(){
const seen=new Set();
document.querySelectorAll('[data-slot]').forEach(img=>{
const slot=img.getAttribute('data-slot');
if(!img.dataset.editReady){
img.dataset.editReady='1';
const host = (slot==='hero') ? img.closest('.hero') : img.parentElement;
host.classList.add('edit-wrap');
// aynı host'a birden fazla etiket koyma
if(!host.querySelector('.edit-tag')){
const tag=document.createElement('span');
tag.className='edit-tag';
tag.innerHTML='✎ Değiştir';
tag.addEventListener('click',ev=>{ev.stopPropagation();activeSlot=slot;fileInput.click();});
host.appendChild(tag);
}
}
});
}
fileInput.addEventListener('change',e=>{
const f=e.target.files[0]; if(!f||!activeSlot)return;
if(f.size>4.5*1024*1024){showToast('Görsel çok büyük (max ~4MB). Daha küçük bir görsel seç.');fileInput.value='';return;}
const r=new FileReader();
r.onload=()=>{
const dataURL=r.result;
// bu slot'a ait TÜM görselleri güncelle (masaüstü + mobil)
document.querySelectorAll('[data-slot="'+activeSlot+'"]').forEach(img=>{img.src=dataURL;});
showToast(slotNames[activeSlot]+' güncellendi ✓');
activeSlot=null; fileInput.value='';
};
r.readAsDataURL(f);
});
// Siteyi indir: mevcut DOM'u (base64 görsellerle) tek HTML olarak dışa aktar.
// Panel korunur → indirilen dosya tekrar #admin ile düzenlenebilir kalır.
document.getElementById('admDownload').addEventListener('click',()=>{
const clone=document.documentElement.cloneNode(true);
// sadece dinamik düzenleme izlerini temizle (dosya normal + temiz açılsın)
clone.querySelectorAll('.edit-tag').forEach(n=>n.remove());
clone.querySelectorAll('.edit-wrap').forEach(n=>n.classList.remove('edit-wrap'));
clone.querySelectorAll('[data-edit-ready]').forEach(n=>n.removeAttribute('data-edit-ready'));
// normal görünümde açılsın (admin kapalı)
const cb=clone.querySelector('body'); if(cb) cb.classList.remove('admin');
// toast'ı gizli başlat
const ct=clone.querySelector('#admToast'); if(ct) ct.classList.remove('show');
const html='<!DOCTYPE html>\n'+clone.outerHTML;
const blob=new Blob([html],{type:'text/html;charset=utf-8'});
const url=URL.createObjectURL(blob);
const a=document.createElement('a');
a.href=url; a.download='kozabiat.html'; a.click();
setTimeout(()=>URL.revokeObjectURL(url),1500);
showToast('Site indirildi ✓ — görseller dosyanın içinde gömülü');
});
document.getElementById('admExit').addEventListener('click',()=>{
body.classList.remove('admin');
history.replaceState(null,'',location.pathname+location.search);
});
// Açma: URL'de #admin varsa VEYA Ctrl+Shift+E
function enterAdmin(){body.classList.add('admin');setupEditables();}
if(location.hash==='#admin')enterAdmin();
window.addEventListener('hashchange',()=>{if(location.hash==='#admin')enterAdmin();});
document.addEventListener('keydown',e=>{
if((e.ctrlKey||e.metaKey)&&e.shiftKey&&(e.key==='E'||e.key==='e')){e.preventDefault();
if(body.classList.contains('admin')){body.classList.remove('admin');}else{enterAdmin();}}
});
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hakkımızda — Kozabiat Tekstil</title>
<meta name="description" content="1996'dan beri Türkiye'nin iç giyim ve pijama üretim gücü. Kozabiat Tekstil hakkında; misyon, vizyon, sertifikalar ve markalarımız.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
/* ===== STICKY HEADER — açılışta şeffaf, scroll'da beyaz ===== */
header{
position:fixed;top:0;left:0;right:0;z-index:50;
background:transparent;
border-bottom:1px solid rgba(255,255,255,.14);
transition:background .4s,border-color .4s,box-shadow .3s;
}
header.scrolled{
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom-color:var(--line);
box-shadow:0 4px 24px rgba(0,0,0,.05);
}
.h-main{
max-width:1560px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px);
}
.logo{flex-shrink:0}
.logo img{height:46px;width:auto;transition:filter .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{
font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;
position:relative;
}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
}
header.scrolled nav.mn a{color:var(--ink)}
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;
}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{
background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0;
}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){
nav.mn{display:none}.burger{display:block}
}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer}
@media(max-width:560px){.h-cta{display:none}.logo img{height:38px}.h-main{height:64px}}
/* ===== HERO (about — biraz daha kısa) ===== */
.hero{
position:relative;
/* gorselin daha genis bolumu gorunsun: ekran orani genisledikce yukseklik artar */
height:clamp(680px,min(100vh,54vw),1040px);
overflow:hidden;
display:flex;align-items:flex-end;background:var(--panel);
}
.hero img.bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;
filter:contrast(1.03) saturate(1.02);
animation:heroIn 2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes heroIn{from{transform:scale(1.05);opacity:.4}to{transform:scale(1);opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,0) 32%,rgba(5,5,5,.08) 55%,rgba(5,5,5,.66) 100%);pointer-events:none}
.hero-c{
position:relative;z-index:2;color:#fff;width:100%;max-width:1480px;margin:0 auto;
padding:0 clamp(20px,4vw,56px) clamp(40px,7vh,80px);
display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.hero-l .crumb{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:22px;animation:ri .9s .2s cubic-bezier(.22,1,.36,1) both}
.hero-l .crumb a{color:rgba(255,255,255,.65)}
.hero-l .crumb a:hover{color:#fff}
.hero-l .ey{font-size:11px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--sky);margin-bottom:16px;animation:ri .9s .3s cubic-bezier(.22,1,.36,1) both}
.hero-l h1{font-weight:500;font-size:clamp(44px,7vw,104px);line-height:1.02;letter-spacing:-.025em;animation:ri .9s .45s cubic-bezier(.22,1,.36,1) both}
.hero-l p{margin-top:22px;font-size:clamp(14px,1.2vw,16px);font-weight:400;max-width:46ch;color:rgba(255,255,255,.9);line-height:1.7;animation:ri .9s .6s cubic-bezier(.22,1,.36,1) both}
.hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px;animation:ri .9s .7s cubic-bezier(.22,1,.36,1) both}
.hero-r .note{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-r .cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:10px;padding:14px 28px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff}
.hero-r .cta:hover{background:transparent;color:#fff;transform:translateY(-2px)}
@keyframes ri{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(max-width:760px){.hero-c{flex-direction:column;align-items:flex-start}.hero-r{align-items:flex-start}}
/* ===== INTRO — editorial iki kolon ===== */
.intro{max-width:1480px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(20px,4vw,56px);position:relative;z-index:2;background:var(--bg)}
.intro-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start}
.intro-l{position:sticky;top:120px}
.intro-l .qt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:24px;display:flex;align-items:center;gap:14px}
.intro-l .qt::before{content:"";width:32px;height:2px;background:var(--teal)}
.intro-l h2{font-weight:500;font-size:clamp(30px,3.6vw,54px);line-height:1.08;letter-spacing:-.02em}
.intro-l h2 em{font-style:normal;color:var(--teal)}
.intro-r p{font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:#39464a;font-weight:400}
.intro-r p+p{margin-top:22px}
.intro-r p strong{font-weight:600;color:var(--ink)}
.intro-r .certline{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px}
.intro-r .certline span{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--gray);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;gap:36px}.intro-l{position:relative;top:0}}
/* ===== İSTATİSTİKLER ===== */
.stats{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-in{
max-width:1480px;margin:0 auto;
padding:clamp(42px,5vw,72px) clamp(20px,4vw,56px);
display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,32px);
}
.st{text-align:center}
.st .n{font-weight:300;font-size:clamp(40px,4.4vw,70px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st .n em{font-style:normal;font-weight:300;color:var(--teal)}
.st .l{margin-top:14px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);line-height:1.8}
@media(max-width:1020px){.stats-in{grid-template-columns:repeat(3,1fr);row-gap:40px}}
@media(max-width:640px){.stats-in{grid-template-columns:repeat(2,1fr)}}
/* ===== ÜRETİM GÜCÜ — koyu band ===== */
.prod{background:var(--panel);color:#fff;position:relative;z-index:2;overflow:hidden}
.prod::before{content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(116,201,227,.16),transparent 68%);pointer-events:none}
.prod-in{max-width:1480px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(20px,4vw,56px);position:relative}
.prod .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--sky);margin-bottom:22px}
.prod h2{font-weight:400;font-size:clamp(26px,3.2vw,48px);line-height:1.14;letter-spacing:-.02em;max-width:20ch}
.prod-g{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)}
.pf{border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.pf .fx{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--sky);margin-bottom:16px}
.pf h3{font-weight:500;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em;margin-bottom:10px}
.pf p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.66);max-width:34ch}
@media(max-width:760px){.prod-g{grid-template-columns:1fr;gap:28px}}
/* ===== MİSYON & VİZYON ===== */
.mv{position:relative;z-index:2;background:var(--bg);border-bottom:1px solid var(--line)}
.mv-in{max-width:1480px;margin:0 auto;padding:clamp(56px,7vw,100px) clamp(20px,4vw,56px)}
.mv-h{text-align:center;margin-bottom:clamp(30px,3.5vw,48px)}
.mv-h .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.mv-h h2{font-weight:400;font-size:clamp(28px,3.4vw,50px);line-height:1.1;letter-spacing:-.02em}
.mv-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.cc{border:1px solid var(--line);border-radius:14px;padding:clamp(30px,3.5vw,54px);display:flex;flex-direction:column;gap:14px;background:var(--bg);transition:background .35s,color .35s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.cc:hover{background:var(--ink);color:#fff;transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,14,14,.14)}
.cc .tg{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);transition:color .35s}
.cc:hover .tg{color:var(--sky)}
.cc h3{font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.05;letter-spacing:-.02em}
.cc p{font-size:15px;line-height:1.8;color:var(--gray);font-weight:400;transition:color .35s}
.cc:hover p{color:rgba(255,255,255,.74)}
@media(max-width:760px){.mv-g{grid-template-columns:1fr}}
/* ===== SERTİFİKALAR ===== */
.certs{position:relative;z-index:2;background:var(--bg);border-bottom:1px solid var(--line)}
.certs-in{max-width:1480px;margin:0 auto;padding:clamp(56px,7vw,100px) clamp(20px,4vw,56px)}
.certs-h{margin-bottom:clamp(30px,3.5vw,48px)}
.certs-h .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.certs-h h2{font-weight:400;font-size:clamp(26px,3.2vw,46px);line-height:1.1;letter-spacing:-.02em;max-width:20ch}
.certs-g{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px)}
.crt{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;aspect-ratio:4/5;min-height:0;padding:0;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .3s}
.crt:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(14,20,22,.16);border-color:rgba(18,137,152,.35)}
.crt .cphoto{position:absolute;inset:0}
.crt .cphoto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.04) brightness(.96);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.crt:hover .cphoto img{transform:scale(1.06)}
.crt::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,18,26,.1) 22%,rgba(4,18,26,.5) 60%,rgba(4,18,26,.9));pointer-events:none;z-index:1}
.crt .cbody{position:relative;z-index:2;padding:clamp(16px,1.7vw,24px);color:#fff;width:100%}
.crt .ix{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--sky)}
.crt .nm{margin-top:8px;font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:.02em;color:#fff}
.crt .dc{margin-top:6px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.82)}
@media(max-width:1020px){.certs-g{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.certs-g{grid-template-columns:repeat(2,1fr)}}
/* ===== MARKALARIMIZ ===== */
.brands{position:relative;z-index:2;background:var(--bg);border-bottom:1px solid var(--line)}
.brands-in{max-width:1480px;margin:0 auto;padding:clamp(56px,7vw,100px) clamp(20px,4vw,56px)}
.brands-h{text-align:center;margin-bottom:clamp(30px,3.5vw,48px)}
.brands-h .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.brands-h h2{font-weight:400;font-size:clamp(28px,3.4vw,50px);line-height:1.1;letter-spacing:-.02em}
.brands-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.bc{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;gap:14px;background:var(--bg);transition:background .35s,color .35s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.bc .tg{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gray);transition:color .35s}
.bc h3{font-weight:600;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.01em}
.bc p{font-size:14px;line-height:1.7;color:var(--gray);font-weight:400;transition:color .35s}
.bc .go{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.bc .go .ar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:14px;transition:background .35s,color .35s,transform .3s}
@media(max-width:860px){.brands-g{grid-template-columns:1fr}}
/* ===== REFERANSLAR — marquee ===== */
.refs{position:relative;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);padding:clamp(44px,5vw,72px) 0;overflow:hidden}
.refs .rh{text-align:center;margin-bottom:clamp(30px,3.5vw,48px);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gray)}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mt{display:flex;align-items:center;gap:clamp(56px,7vw,110px);width:max-content;animation:ms 38s linear infinite}
.mq:hover .mt{animation-play-state:paused}
.mt img{height:clamp(24px,2.4vw,36px);width:auto;filter:grayscale(1) contrast(1.05);opacity:.5;transition:opacity .3s,filter .3s}
.mt img:hover{opacity:1;filter:grayscale(0) contrast(1)}
@keyframes ms{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ===== İLETİŞİM / LOKASYONLAR ===== */
.loc{position:relative;z-index:2;background:var(--bg)}
.loc-in{max-width:1480px;margin:0 auto;padding:clamp(56px,7vw,100px) clamp(20px,4vw,56px)}
.loc-h{margin-bottom:clamp(30px,3.5vw,48px)}
.loc-h .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.loc-h h2{font-weight:400;font-size:clamp(26px,3.2vw,46px);line-height:1.1;letter-spacing:-.02em}
.loc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.lc{border:1px solid var(--line);border-radius:14px;padding:clamp(26px,2.8vw,40px);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .3s,box-shadow .3s}
.lc:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:0 16px 34px rgba(18,137,152,.08)}
.lc .tg{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--teal)}
.lc h3{font-weight:600;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.01em}
.lc .adr{font-size:13.5px;line-height:1.7;color:var(--gray)}
.lc .row{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.lc .row a{font-size:13px;color:var(--ink);font-weight:500;transition:color .25s;display:inline-flex;align-items:center;gap:8px}
.lc .row a:hover{color:var(--teal)}
.lc .row a .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;min-width:52px}
@media(max-width:900px){.loc-g{grid-template-columns:1fr}}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{
max-width:1480px;margin:0 auto;
padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);
display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px);
}
.ft-col .ft-title{
font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block;
}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{
max-width:1480px;margin:0 auto;
padding:20px clamp(20px,4vw,56px) 28px;
border-top:1px solid var(--line);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray);
}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ============ YÖNETİM PANELİ (gizli, #admin ile açılır) ============ */
.adm-bar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);z-index:9999;
display:flex;align-items:center;gap:16px;background:rgba(10,19,21,.94);backdrop-filter:blur(14px);
color:#fff;padding:13px 16px 13px 22px;border-radius:16px;border:1px solid rgba(116,201,227,.28);
box-shadow:0 20px 60px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.22,1,.36,1);
font-family:var(--sans);max-width:calc(100vw - 32px)}
body.admin .adm-bar{transform:translateX(-50%) translateY(0)}
.adm-bar .adm-dot{width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 10px var(--sky);flex-shrink:0}
.adm-bar .adm-t{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.adm-bar .adm-t small{display:block;font-size:10px;font-weight:400;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.5);margin-top:2px}
.adm-bar .adm-sep{width:1px;height:30px;background:rgba(255,255,255,.14);flex-shrink:0}
.adm-btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:none;
border-radius:10px;padding:11px 18px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap;font-family:var(--sans)}
.adm-btn:hover{background:#0f7684;transform:translateY(-1px)}
.adm-btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85)}
.adm-btn.ghost:hover{background:rgba(255,255,255,.08)}
body.admin [data-slot]{cursor:pointer}
body.admin .edit-wrap{position:relative;outline:2px dashed rgba(116,201,227,.55);outline-offset:-2px}
.edit-tag{position:absolute;z-index:50;top:12px;left:12px;display:none;align-items:center;gap:7px;
background:rgba(10,19,21,.92);color:#fff;padding:9px 14px;border-radius:9px;font-family:var(--sans);
font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
border:1px solid rgba(116,201,227,.4);transition:background .2s;pointer-events:auto}
.edit-tag:hover{background:var(--teal)}
body.admin .edit-wrap .edit-tag{display:inline-flex}
.hero .edit-tag{top:auto;bottom:120px}
.adm-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:10000;
background:var(--teal);color:#fff;padding:12px 22px;border-radius:10px;font-family:var(--sans);font-size:13px;
font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.adm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){
.adm-bar{flex-wrap:wrap;gap:10px;padding:12px 14px;left:16px;right:16px;transform:translateY(140%)}
body.admin .adm-bar{transform:translateY(0)}
.adm-bar .adm-sep{display:none}
}
/* ============ ELITE ADDITIONS — bütünlük / kurumsal katman ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Sertifika — foto kart */
/* Markalar — logo kilidi + kurumsal light hover (koyu invert YOK; logolar okunur kalsın) */
.bc{position:relative;overflow:hidden}
.bc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc,var(--teal));
transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.bc:hover::before{transform:scaleX(1)}
.bc .brand-logo{position:relative;height:130px;display:flex;align-items:center;justify-content:center;
background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px;margin-bottom:2px;
transition:border-color .35s,box-shadow .35s}
.bc .brand-logo img{max-height:100%;max-width:82%;width:auto;object-fit:contain}
.bc:hover{background:var(--bg);color:inherit;transform:translateY(-6px);box-shadow:0 26px 54px rgba(14,20,22,.10)}
.bc:hover .brand-logo{border-color:rgba(18,137,152,.30);box-shadow:0 12px 28px rgba(18,137,152,.07)}
.bc:hover .tg{color:var(--teal)}
.bc:hover p{color:var(--gray)}
.bc .go .ar{background:var(--acc,var(--ink))}
.bc:hover .go .ar{transform:translateX(4px)}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- mobilde marka/magaza karti: gorsel ustte, baslik gorselin uzerinde ---- */
.mm-wrap{display:contents}
.mm-cap{display:none}
@media(max-width:900px){
.si{display:flex;flex-direction:column;margin-bottom:38px}
.si>.body,.si .body{display:flex;flex-direction:column}
.si .ix{display:none}
.mm-wrap{display:block;position:relative;order:-1;width:100%;
margin:0 0 20px;border-radius:16px;overflow:hidden;background:#0d1416}
.mm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 48%,rgba(8,12,14,.74) 100%)}
.mm-wrap .mm,.mm-wrap img.mm{display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;margin:0;clip-path:none;border-radius:0;min-height:0;max-height:none}
.mm-wrap .mm img{width:100%;height:100%;object-fit:cover}
.mm-cap{display:block;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* metin blogu rahat aksin */
.si .cat{margin-bottom:10px}
.si h3{font-size:clamp(19px,5.2vw,24px);line-height:1.35}
.si .brand-logo{margin:0 0 14px}
.s-meta .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.s-meta .row .k{font-size:10px;letter-spacing:.2em}
.s-meta .row .v{font-size:14px;line-height:1.55}
}
/* ---- hero gorselleri: mobilde daha dengeli kadraj ---- */
@media(max-width:640px){
.hero{min-height:min(74vh,620px)}
.hero img.bg,.hero video.bg,.hero .bg{object-position:center center}
.hero-l h1{font-size:clamp(32px,9.5vw,46px)}
.hero-l p{font-size:14px;max-width:100%}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="https://www.kozabiat.com/" class="logo"><img src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="https://www.kozabiat.com/">Anasayfa</a></li>
<li><a href="https://www.kozabiat.com/hakkimizda.html" class="active">Hakkımızda</a></li>
<li><a href="https://www.kozabiat.com/markalarimiz/">Markalarımız</a></li>
<li><a href="https://www.kozabiat.com/sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="https://www.kozabiat.com/magazalarimiz/">Mağazalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="https://www.kozabiat.com/iletisim/" class="h-cta">İletişim</a>
<button class="burger" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="https://www.kozabiat.com/">Anasayfa</a></li><li><a href="https://www.kozabiat.com/hakkimizda.html">Hakkımızda</a></li>
<li><a href="https://www.kozabiat.com/markalarimiz/">Markalarımız</a></li><li><a href="https://www.kozabiat.com/sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="https://www.kozabiat.com/magazalarimiz/">Mağazalarımız</a></li><li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="https://www.kozabiat.com/iletisim/">İletişim</a></li>
</ul>
</div>
<!-- HERO -->
<section class="hero">
<img data-kb-m="hakkimizda1" class="bg" data-slot="hero" src="https://picsum.photos/id/1076/2400/1500" alt="Kozabiat Tekstil">
<div class="hero-c">
<div class="hero-l">
<div class="ey">1996'dan beri</div>
<h1>Biz Kimiz?</h1>
<p>Türkiye'nin üretim potansiyelini üç markayla üç kıtaya taşıyan iç giyim ve pijama üreticisi. Her dikişte otuz yıllık ustalık.</p>
</div>
<div class="hero-r">
<div class="note">Discover The Potential</div>
<a href="#hikaye" class="cta">Hikayemiz ↓</a>
</div>
</div>
</section>
<!-- INTRO -->
<section class="intro" id="hikaye">
<div class="intro-grid">
<div class="intro-l reveal">
<div class="qt">Kozabiat Hakkında</div>
<h2>Türkiye'nin üretim gücünü <em>dünyaya</em> taşıyoruz.</h2>
</div>
<div class="intro-r reveal">
<p>1996 yılında kurulan ve Türkiye'nin lider iç çamaşırı ve pijama üreticisi olma yolunda ilerleyen <strong>Kozabiat Tekstil</strong>, yurt içi pazarda güçlü varlık gösterirken; <strong>"Discover The Potential"</strong> sloganıyla Türkiye'deki üretim potansiyelini Orta Doğu, Asya ve Avrupa'da temsil etmektedir.</p>
<p>Kozabiat Tekstil, İstanbul ve Niğde fabrikaları olmak üzere toplam <strong>18.000 m²</strong> alanda, ayda <strong>2.000.000'dan fazla adet</strong> ile üretim yapmakta ve <strong>500 kişilik ekibiyle</strong> kendi koleksiyonlarını tasarlayıp üretmektedir.</p>
<p>Her yeni sezonun trendlerine göre yapılan özgün tasarımların yanı sıra Kozabiat; dünya çapında kabul gören uluslararası kalite ve etik üretim sertifikalarına sahiptir.</p>
<div class="certline">
<span>SEDEX</span><span>EAC</span><span>ISO</span><span>UKR-SEPRO</span><span>BSCI</span>
</div>
</div>
</div>
</section>
<!-- STATS -->
<section class="stats">
<div class="stats-in">
<div class="st reveal"><div class="n"><span class="cnt" data-t="500" data-f="r">0</span><em>+</em></div><div class="l">Çalışan</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="50" data-f="r">0</span><em>+</em></div><div class="l">İhracat Yapılan Ülke</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="2000000" data-f="m">0</span><em>+</em></div><div class="l">Adet Aylık Üretim Kapasitesi</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="2" data-f="r">0</span></div><div class="l">Fabrika</div></div>
<div class="st reveal"><div class="n"><span class="cnt" data-t="3" data-f="r">0</span></div><div class="l">Marka Altında Binlerce Ürün</div></div>
</div>
</section>
<!-- ÜRETİM GÜCÜ -->
<section class="prod">
<div class="prod-in">
<div class="ey reveal">Üretim Gücümüz</div>
<h2 class="reveal">İki fabrika, 18.000 m², tek çatı altında uçtan uca üretim.</h2>
<div class="prod-g">
<div class="pf reveal">
<div class="fx">01 — İstanbul</div>
<h3>Merkez Fabrika</h3>
<p>Tasarım, kalıp ve koleksiyon geliştirmenin kalbi. Ürünlerimiz fikirden dikişe burada hayat buluyor.</p>
</div>
<div class="pf reveal">
<div class="fx">02 — Niğde</div>
<h3>Üretim Tesisi</h3>
<p>Yüksek kapasiteli seri üretim hattıyla ayda 2 milyondan fazla adetlik üretim gücü.</p>
</div>
<div class="pf reveal">
<div class="fx">03 — Uçtan Uca</div>
<h3>Kendi Koleksiyonumuz</h3>
<p>Trend araştırmasından sevkiyata; her aşamayı kendi ekibimizle, kendi standartlarımızla yönetiyoruz.</p>
</div>
</div>
</div>
</section>
<!-- MİSYON & VİZYON -->
<section class="mv">
<div class="mv-in">
<div class="mv-h reveal"><div class="ey">Yön Duygumuz</div><h2>Misyon & Vizyon</h2></div>
<div class="mv-g">
<div class="cc reveal">
<div class="tg">Misyonumuz</div>
<h3>Her zaman tercih edilmek</h3>
<p>Ürünlerimizi sürekli geliştirerek müşteri talep ve beklentilerini en uygun şekilde karşılamak; en düşük fiyat, en yüksek kalite ve hızlı teslimat ilkelerimizle en çok tercih edilen iç çamaşırı firması olmak; Türkiye'de ve dünyada rekabet gücümüzü artırmak ve adımızı olabildiğince geniş kitlelere ulaştırmak.</p>
</div>
<div class="cc reveal">
<div class="tg">Vizyonumuz</div>
<h3>Dünya çapında bir marka</h3>
<p>Doğru kalite, uygun fiyat ve geniş ürün yelpazemizle dünya çapında markalaşmak ve kalıcılık sağlamak. Türkiye'nin üretim gücünü, üç kıtaya yayılan güçlü bir marka mirasına dönüştürmek.</p>
</div>
</div>
</div>
</section>
<!-- SERTİFİKALAR -->
<section class="certs">
<div class="certs-in">
<div class="certs-h reveal">
<div class="ey">Kalite & Etik Üretim</div>
<h2>Uluslararası standartlarla üretiyoruz.</h2>
</div>
<div class="certs-g">
<div class="crt reveal" data-edit-host><div class="cphoto"><img data-kb-m="hakkimizda2" data-slot="cert-sedex" src="https://picsum.photos/seed/kozacert-sedex/600/760" alt="SEDEX sertifikası"></div><div class="cbody"><div class="ix">01</div><div class="nm">SEDEX</div><div class="dc">Etik ticaret ve sorumlu üretim denetimi</div></div></div>
<div class="crt reveal" data-edit-host><div class="cphoto"><img data-kb-m="hakkimizda3" data-slot="cert-eac" src="https://picsum.photos/seed/kozacert-eac/600/760" alt="EAC sertifikası"></div><div class="cbody"><div class="ix">02</div><div class="nm">EAC</div><div class="dc">Avrasya uygunluk belgesi</div></div></div>
<div class="crt reveal" data-edit-host><div class="cphoto"><img data-kb-m="hakkimizda4" data-slot="cert-iso" src="https://picsum.photos/seed/kozacert-iso/600/760" alt="ISO sertifikası"></div><div class="cbody"><div class="ix">03</div><div class="nm">ISO</div><div class="dc">Uluslararası kalite yönetim standardı</div></div></div>
<div class="crt reveal" data-edit-host><div class="cphoto"><img data-kb-m="hakkimizda5" data-slot="cert-ukr" src="https://picsum.photos/seed/kozacert-ukr/600/760" alt="UKR-SEPRO sertifikası"></div><div class="cbody"><div class="ix">04</div><div class="nm">UKR-SEPRO</div><div class="dc">Ukrayna ürün uygunluk sertifikası</div></div></div>
<div class="crt reveal" data-edit-host><div class="cphoto"><img data-kb-m="hakkimizda6" data-slot="cert-bsci" src="https://picsum.photos/seed/kozacert-bsci/600/760" alt="BSCI sertifikası"></div><div class="cbody"><div class="ix">05</div><div class="nm">BSCI</div><div class="dc">Sosyal uygunluk ve iş etiği denetimi</div></div></div>
</div>
</div>
</section>
<!-- MARKALARIMIZ -->
<section class="brands">
<div class="brands-in">
<div class="brands-h reveal"><div class="ey">Üç Marka, Tek Miras</div><h2>Markalarımız</h2></div>
<div class="brands-g">
<a class="bc reveal" href="https://www.kozabiat.com/dominant/" style="--acc:#E30613">
<div class="brand-logo" data-edit-host><img data-kb-m="hakkimizda7" data-slot="logo-dominant" src="/media/6e56db5776beb7fe465d89173ad0b113364896fcda9e59332184656a870cf604.svg" alt="Dominant"></div>
<h3 class="sr-only">Dominant</h3>
<div class="tg">Kadın & İç Giyim</div>
<p>Modern tasarımları ve kaliteli malzemeleriyle dikkat çeken bir iç giyim markası.</p>
<span class="go">Keşfet <span class="ar">→</span></span>
</a>
<a class="bc reveal" href="https://www.kozabiat.com/rockhard/" style="--acc:#F07E1A">
<div class="brand-logo" data-edit-host><img data-kb-m="hakkimizda8" data-slot="logo-rockhard" src="/media/14204e1eee75d1ed0865785705a86410ee3c7e08e8ba85b394b409c101faad8e.png" alt="Rockhard"></div>
<h3 class="sr-only">Rockhard</h3>
<div class="tg">Erkek İç Giyim</div>
<p>Erkekler için modern tasarımları ve kaliteli malzemeleriyle öne çıkan bir iç giyim markası.</p>
<span class="go">Keşfet <span class="ar">→</span></span>
</a>
<a class="bc reveal" href="https://www.kozabiat.com/domikids/" style="--acc:#74C9E3">
<div class="brand-logo" data-edit-host><img data-kb-m="hakkimizda9" data-slot="logo-domikids" src="/media/0fcdf574be7e34887ad5127a929f55d1ccebb6b3e1405e6f001d904a57e4e4d4.svg" alt="Domikids"></div>
<h3 class="sr-only">Domikids</h3>
<div class="tg">Çocuk</div>
<p>Çocukların rahat ve özgür hissedebilecekleri rengârenk ürünler sunan bir iç giyim markası.</p>
<span class="go">Keşfet <span class="ar">→</span></span>
</a>
</div>
</div>
</section>
<!-- REFERANSLAR -->
<section class="refs">
<div class="rh">Referanslarımız</div>
<div class="mq"><div class="mt">
<img data-kb-m="hakkimizda10" src="https://www.kozabiat.com/uploads/genelresim/b_columbia_95720.png" alt="Columbia">
<img data-kb-m="hakkimizda11" src="https://www.kozabiat.com/uploads/genelresim/b_boyner_51133.png" alt="Boyner">
<img data-kb-m="hakkimizda12" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8103.png" alt="T-box">
<img data-kb-m="hakkimizda13" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8102.png" alt="Limon Company">
<img data-kb-m="hakkimizda14" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72210.png" alt="Amazon">
<img data-kb-m="hakkimizda15" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_85423.png" alt="Pierre Cardin">
<img data-kb-m="hakkimizda16" src="https://www.kozabiat.com/uploads/genelresim/b_lc_waikiki_51135.png" alt="LC Waikiki">
<img data-kb-m="hakkimizda17" src="https://www.kozabiat.com/uploads/genelresim/b_trendyol_51134.png" alt="Trendyol">
<img data-kb-m="hakkimizda18" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_93040.png" alt="Colin's">
<img data-kb-m="hakkimizda19" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72211.png" alt="Koton">
<img data-kb-m="hakkimizda20" src="https://www.kozabiat.com/uploads/genelresim/b_defacto_67491.png" alt="DeFacto">
<img data-kb-m="hakkimizda21" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_16230.jpg" alt="A101">
<img data-kb-m="hakkimizda22" src="https://www.kozabiat.com/uploads/genelresim/b_columbia_95720.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda23" src="https://www.kozabiat.com/uploads/genelresim/b_boyner_51133.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda24" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8103.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda25" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_8102.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda26" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72210.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda27" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_85423.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda28" src="https://www.kozabiat.com/uploads/genelresim/b_lc_waikiki_51135.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda29" src="https://www.kozabiat.com/uploads/genelresim/b_trendyol_51134.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda30" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_93040.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda31" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_72211.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda32" src="https://www.kozabiat.com/uploads/genelresim/b_defacto_67491.png" alt="" aria-hidden="true">
<img data-kb-m="hakkimizda33" src="https://www.kozabiat.com/uploads/genelresim/b_referanslarimiz_16230.jpg" alt="" aria-hidden="true">
</div></div>
</section>
<!-- LOKASYONLAR -->
<section class="loc">
<div class="loc-in">
<div class="loc-h reveal">
<div class="ey">Bize Ulaşın</div>
<h2>Lokasyonlarımız</h2>
</div>
<div class="loc-g">
<div class="lc reveal">
<div class="tg">Merkez Ofis</div>
<h3>Çekmeköy / İstanbul</h3>
<div class="adr">Merkez Mah. Çavuşbaşı Cd. Aytekin Sk. No:2 Çekmeköy / İstanbul</div>
<div class="row">
<a href="tel:+902165277178"><span class="k">Tel</span> +90 (216) 527 71 78</a>
<a href="mailto:
[email protected]"><span class="k">E-Posta</span>
[email protected]</a>
</div>
</div>
<div class="lc reveal">
<div class="tg">Mağaza</div>
<h3>Zeytinburnu / İstanbul</h3>
<div class="adr">Telsiz Mah. Balıklı Yolu Sk. No:42/1 Zeytinburnu / İstanbul</div>
<div class="row">
<a href="tel:+902125102757"><span class="k">Tel</span> +90 (212) 510 27 57</a>
<a href="mailto:
[email protected]"><span class="k">E-Posta</span>
[email protected]</a>
</div>
</div>
<div class="lc reveal">
<div class="tg">Mağaza</div>
<h3>Yeşildirek / İstanbul</h3>
<div class="adr">Sururi Mah. Tarakçı Caferağa Sk, Niğde Han No:3 İç Kapı No:15 Yeşildirek - Fatih / İstanbul</div>
<div class="row">
<a href="tel:+902125111201"><span class="k">Tel</span> +90 (212) 511 12 01</a>
<a href="mailto:
[email protected]"><span class="k">E-Posta</span>
[email protected]</a>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html" class="active">Hakkımızda</a></li>
<li><a href="hakkimizda.html" class="active">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html">Dominant</a></li>
<li><a href="markalarimiz.html">Rockhard</a></li>
<li><a href="markalarimiz.html">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html">Basın</a></li>
<li><a href="medya.html">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<script>
(function(){
const R=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
const H=document.getElementById('hdr');
window.addEventListener('scroll',()=>H.classList.toggle('scrolled',window.scrollY>40),{passive:true});
/* SAYAÇLAR */
const fm={m:v=>v>=1e6?Math.round(v/1e6)+'M':v>=1e3?Math.round(v/1e3)+'K':Math.round(v),r:v=>Math.round(v)};
function cu(el){
const tg=+el.dataset.t,f=fm[el.dataset.f]||fm.r;
if(R){el.textContent=f(tg);return}
const d=2000,t0=performance.now();
(function tk(t){const p=Math.min((t-t0)/d,1),e=1-Math.pow(1-p,3);el.textContent=f(tg*e);if(p<1)requestAnimationFrame(tk);else el.textContent=f(tg)})(t0);
}
const ci=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){cu(x.target);ci.unobserve(x.target)}}),{threshold:.35});
document.querySelectorAll('.cnt').forEach(el=>ci.observe(el));
/* REVEAL */
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.15});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
document.querySelectorAll('#mn a').forEach(a=>a.addEventListener('click',()=>document.getElementById('mn').classList.remove('open')));
})();
</script>
<!-- ============ YÖNETİM PANELİ ============ -->
<div class="adm-bar" id="admBar">
<span class="adm-dot"></span>
<span class="adm-t">Düzenleme Modu<small>Görselin üstündeki "Değiştir"e tıkla</small></span>
<span class="adm-sep"></span>
<button class="adm-btn" id="admDownload">↓ Siteyi İndir</button>
<button class="adm-btn ghost" id="admExit">Kapat</button>
</div>
<div class="adm-toast" id="admToast"></div>
<input type="file" id="admFile" accept="image/*" style="display:none">
<script>
(function(){
const body=document.body;
const fileInput=document.getElementById('admFile'), toast=document.getElementById('admToast');
let activeSlot=null;
const slotNames={hero:'Hero Banner','logo-dominant':'Dominant Logo','logo-rockhard':'Rockhard Logo','logo-domikids':'Domikids Logo','cert-sedex':'SEDEX Görseli','cert-eac':'EAC Görseli','cert-iso':'ISO Görseli','cert-ukr':'UKR-SEPRO Görseli','cert-bsci':'BSCI Görseli'};
function showToast(msg){toast.textContent=msg;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),2600);}
function setupEditables(){
document.querySelectorAll('[data-slot]').forEach(img=>{
const slot=img.getAttribute('data-slot');
if(!img.dataset.editReady){
img.dataset.editReady='1';
const host = (slot==='hero') ? img.closest('.hero') : (img.closest('[data-edit-host]') || img.parentElement);
host.classList.add('edit-wrap');
if(!host.querySelector('.edit-tag')){
const tag=document.createElement('span');
tag.className='edit-tag';
tag.innerHTML='✎ Değiştir';
tag.addEventListener('click',ev=>{ev.stopPropagation();ev.preventDefault();activeSlot=slot;fileInput.click();});
host.appendChild(tag);
}
}
});
}
fileInput.addEventListener('change',e=>{
const f=e.target.files[0]; if(!f||!activeSlot)return;
if(f.size>4.5*1024*1024){showToast('Görsel çok büyük (max ~4MB). Daha küçük bir görsel seç.');fileInput.value='';return;}
const r=new FileReader();
r.onload=()=>{
const dataURL=r.result;
document.querySelectorAll('[data-slot="'+activeSlot+'"]').forEach(img=>{img.src=dataURL;});
showToast((slotNames[activeSlot]||'Görsel')+' güncellendi ✓');
activeSlot=null; fileInput.value='';
};
r.readAsDataURL(f);
});
document.getElementById('admDownload').addEventListener('click',()=>{
const clone=document.documentElement.cloneNode(true);
clone.querySelectorAll('.edit-tag').forEach(n=>n.remove());
clone.querySelectorAll('.edit-wrap').forEach(n=>n.classList.remove('edit-wrap'));
clone.querySelectorAll('[data-edit-ready]').forEach(n=>n.removeAttribute('data-edit-ready'));
const cb=clone.querySelector('body'); if(cb) cb.classList.remove('admin');
const ct=clone.querySelector('#admToast'); if(ct) ct.classList.remove('show');
const html='<!DOCTYPE html>\n'+clone.outerHTML;
const blob=new Blob([html],{type:'text/html;charset=utf-8'});
const url=URL.createObjectURL(blob);
const a=document.createElement('a');
a.href=url; a.download='hakkimizda.html'; a.click();
setTimeout(()=>URL.revokeObjectURL(url),1500);
showToast('Site indirildi ✓ — görseller dosyanın içinde gömülü');
});
document.getElementById('admExit').addEventListener('click',()=>{
body.classList.remove('admin');
history.replaceState(null,'',location.pathname+location.search);
});
function enterAdmin(){body.classList.add('admin');setupEditables();}
if(location.hash==='#admin')enterAdmin();
window.addEventListener('hashchange',()=>{if(location.hash==='#admin')enterAdmin();});
document.addEventListener('keydown',e=>{
if((e.ctrlKey||e.metaKey)&&e.shiftKey&&(e.key==='E'||e.key==='e')){e.preventDefault();
if(body.classList.contains('admin')){body.classList.remove('admin');}else{enterAdmin();}}
});
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markalarımız — Kozabiat Tekstil</title>
<meta name="description" content="Kozabiat markaları: kadın iç giyiminde Dominant, erkek iç giyiminde Rockhard, çocuk iç giyiminde Domikids. Tek çatı, üç imza.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
::selection{background:var(--teal);color:#fff}
/* ===== STICKY HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);transition:background .4s,border-color .4s,box-shadow .3s}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(4,10,14,.6),rgba(4,10,14,0));opacity:1;transition:opacity .4s}
header.scrolled::before{opacity:0}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.05)}
.h-main{max-width:1560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px)}
.logo{flex-shrink:0}
.logo img{height:46px;width:auto;transition:filter .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;position:relative}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
header.scrolled nav.mn a{color:var(--ink)}
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){nav.mn{display:none}.burger{display:block}}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer}
@media(max-width:560px){.h-cta{display:none}.logo img{height:38px}.h-main{height:64px}}
/* ===== HERO ===== */
.hero{position:relative;height:92vh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end;background:var(--panel)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:contrast(1.04) saturate(1.02);animation:heroIn 2.2s cubic-bezier(.22,1,.36,1) both}
@keyframes heroIn{from{transform:scale(1.08);opacity:.3}to{transform:scale(1);opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.36) 0%,rgba(5,5,5,0) 34%,rgba(5,5,5,.1) 58%,rgba(5,5,5,.72) 100%);pointer-events:none}
.hero-c{position:relative;z-index:2;color:#fff;width:100%;max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(56px,10vh,120px)}
.hero-tag{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--sky);margin-bottom:26px;animation:ri .9s .25s cubic-bezier(.22,1,.36,1) both}
.hero-tag::before{content:"";width:44px;height:2px;background:var(--sky)}
.hero h1{font-weight:500;font-size:clamp(50px,9vw,138px);line-height:.96;letter-spacing:-.035em;max-width:14ch;animation:ri 1s .4s cubic-bezier(.22,1,.36,1) both}
.hero p{margin-top:28px;font-size:clamp(15px,1.25vw,18px);font-weight:400;max-width:52ch;color:rgba(255,255,255,.88);line-height:1.75;animation:ri 1s .58s cubic-bezier(.22,1,.36,1) both}
.hero p strong{color:#fff;font-weight:600}
@keyframes ri{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;width:1px;height:56px;background:rgba(255,255,255,.28);overflow:hidden}
.hero-scroll::after{content:"";position:absolute;left:0;top:-56px;width:1px;height:56px;background:#fff;animation:drop 2.1s cubic-bezier(.76,0,.24,1) infinite}
@keyframes drop{0%{top:-56px}55%{top:56px}100%{top:56px}}
/* ===== MANIFESTO ===== */
.man{max-width:1560px;margin:0 auto;padding:clamp(52px,6.5vw,96px) clamp(20px,4vw,56px);position:relative;z-index:2}
.man-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,84px);align-items:start}
.man-l{position:sticky;top:120px}
.man-l .k{font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--teal);margin-bottom:30px;display:flex;align-items:center;gap:16px}
.man-l .k::before{content:"";width:44px;height:2px;background:var(--teal)}
.man-l h2{font-weight:500;font-size:clamp(30px,3.9vw,58px);line-height:1.06;letter-spacing:-.03em}
.man-l h2 em{font-style:normal;color:var(--teal)}
.man-r{padding-top:8px}
.man-r p{font-size:clamp(15px,1.2vw,18px);line-height:1.9;color:#39464a;font-weight:400}
.man-r p+p{margin-top:26px}
.man-r p strong{font-weight:600;color:var(--ink)}
@media(max-width:900px){.man-grid{grid-template-columns:1fr;gap:36px}.man-l{position:relative;top:0}}
/* ===== MARKALAR — sticky scroll story (anasayfadan, daha geniş) ===== */
.sw{height:440vh;position:relative;background:var(--bg)}
.story{position:sticky;top:0;height:100vh;overflow:hidden;transition:background .12s linear}
.s-head{position:absolute;z-index:5;top:clamp(98px,13vh,132px);left:clamp(20px,6vw,120px);font-size:13px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:14px;transition:color .35s ease}
.s-head::before{content:"";width:36px;height:2px;background:var(--teal);transition:background .35s ease}
.story.dark .s-head{color:#fff}
.story.dark .s-head::before{background:#fff}
.story.dark .si .cat{color:#fff}
.story.dark .si h3{color:rgba(255,255,255,.94)}
.s-left{position:absolute;left:0;top:0;bottom:0;width:48%;display:flex;align-items:flex-start;padding:clamp(178px,23vh,250px) 4vw 0 clamp(20px,6vw,120px)}
.s-items{position:relative;width:100%;height:54vh;min-height:360px}
.si{position:absolute;inset:0;display:flex;align-items:flex-start;opacity:0;will-change:opacity,transform;pointer-events:none}
.si.on{pointer-events:auto}
.si .body{display:flex;flex-direction:column;align-items:flex-start}
.si .cat{font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:block;transition:color .35s ease}
.si .brand-logo{order:-1;margin-bottom:32px;display:flex;align-items:center;height:clamp(100px,10vw,158px)}
.si .brand-logo img{width:auto}
.si .brand-logo.dom img{height:clamp(130px,13vw,206px)}
.si .brand-logo.rh img{height:clamp(64px,6.2vw,98px)}
.si .brand-logo.dmk img{height:clamp(62px,6vw,94px)}
.si h3{font-weight:500;font-size:clamp(27px,2.9vw,46px);line-height:1.22;letter-spacing:-.018em;color:var(--gray);transition:color .35s ease;max-width:20ch}
.s-right{position:absolute;right:0;top:0;bottom:0;width:56%;background:var(--panel);clip-path:polygon(44px 0%,100% 0%,100% 100%,44px 100%,44px 76%,0% 72.5%,0% 27.5%,44px 24%);overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sm{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.sm img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.sm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 0%,rgba(5,5,5,0) 40%,rgba(5,5,5,.28) 100%)}
.sm .tg{position:absolute;z-index:3;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px}
.sm .tg::before{content:"·";font-size:18px;line-height:0}
.sm .t1{left:8%;bottom:14%}.sm .t2{right:8%;top:16%;color:var(--sky)}
.sp{position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:10px}
.sp .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,height .3s,border-radius .3s}
.sp .d.on{background:var(--sky);height:22px;border-radius:4px}
.mm{display:none}
@media(max-width:900px){
.sw{height:auto}
.story{position:relative;height:auto;overflow:visible;background:var(--bg)!important}
.s-head{position:relative;top:auto;left:auto;padding:100px clamp(20px,5vw,40px) 0}
.s-left{position:relative;width:100%;padding:28px clamp(20px,5vw,40px) 0;display:block}
.s-items{height:auto;min-height:0}
.si{position:relative;opacity:1!important;transform:none!important;pointer-events:auto;margin-bottom:32px;align-items:flex-start;transition:none}
.story.dark .si .cat{color:var(--teal)}
.story.dark .si h3{color:var(--gray)}
.s-right,.sp{display:none}
.mm{display:block;overflow:hidden;aspect-ratio:4/5;margin:20px 0 40px;background:var(--panel);clip-path:polygon(24px 0%,100% 0%,100% 100%,24px 100%,24px 78%,0% 75%,0% 25%,24px 22%)}
.mm img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.si .brand-logo{height:72px}
.si .brand-logo.dom img{height:104px}
.si .brand-logo.rh img{height:48px}
.si .brand-logo.dmk img{height:46px}
}
@media(min-width:901px){.mm{display:none}}
/* ===== FULL-BLEED GÖRSEL BANDI ===== */
.band{position:relative;z-index:2;min-height:74vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:var(--panel)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.05) saturate(1.02)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,10,.55),rgba(5,8,10,.72))}
.band-in{position:relative;z-index:2;max-width:1100px;padding:clamp(60px,9vw,120px) clamp(20px,4vw,56px)}
.band-in .bk{font-size:12px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--sky);margin-bottom:26px}
.band-in h2{font-weight:500;font-size:clamp(32px,5.2vw,84px);line-height:1.02;letter-spacing:-.03em}
.band-in p{margin:26px auto 0;max-width:56ch;font-size:clamp(15px,1.2vw,18px);line-height:1.8;color:rgba(255,255,255,.8)}
/* ===== KAPANIŞ CTA ===== */
.mclose{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line)}
.mclose-in{max-width:1200px;margin:0 auto;padding:clamp(80px,11vw,170px) clamp(20px,4vw,56px);text-align:center}
.mclose .ey{font-size:12px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--teal);margin-bottom:26px}
.mclose h2{font-weight:500;font-size:clamp(34px,5.4vw,84px);line-height:1.02;letter-spacing:-.03em}
.mclose p{margin:26px auto 0;max-width:56ch;font-size:clamp(15px,1.15vw,18px);line-height:1.75;color:var(--gray)}
.mclose .btns{margin-top:46px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mclose .btn{display:inline-flex;align-items:center;gap:10px;padding:17px 34px;border-radius:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:transform .25s,background .25s,color .25s,border-color .25s}
.mclose .btn.fill{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.mclose .btn.fill:hover{transform:translateY(-2px);background:var(--teal);border-color:var(--teal)}
.mclose .btn.line{background:transparent;color:var(--ink);border:1px solid var(--line)}
.mclose .btn.line:hover{transform:translateY(-2px);border-color:var(--ink)}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{max-width:1480px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px)}
.ft-col .ft-title{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{max-width:1480px;margin:0 auto;padding:20px clamp(20px,4vw,56px) 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray)}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- mobilde marka/magaza karti: gorsel ustte, baslik gorselin uzerinde ---- */
.mm-wrap{display:contents}
.mm-cap{display:none}
@media(max-width:900px){
.si{display:flex;flex-direction:column;margin-bottom:38px}
.si>.body,.si .body{display:flex;flex-direction:column}
.si .ix{display:none}
.mm-wrap{display:block;position:relative;order:-1;width:100%;
margin:0 0 20px;border-radius:16px;overflow:hidden;background:#0d1416}
.mm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 48%,rgba(8,12,14,.74) 100%)}
.mm-wrap .mm,.mm-wrap img.mm{display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;margin:0;clip-path:none;border-radius:0;min-height:0;max-height:none}
.mm-wrap .mm img{width:100%;height:100%;object-fit:cover}
.mm-cap{display:block;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* metin blogu rahat aksin */
.si .cat{margin-bottom:10px}
.si h3{font-size:clamp(19px,5.2vw,24px);line-height:1.35}
.si .brand-logo{margin:0 0 14px}
.s-meta .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.s-meta .row .k{font-size:10px;letter-spacing:.2em}
.s-meta .row .v{font-size:14px;line-height:1.55}
}
/* ---- hero gorselleri: mobilde daha dengeli kadraj ---- */
@media(max-width:640px){
.hero{min-height:min(74vh,620px)}
.hero img.bg,.hero video.bg,.hero .bg{object-position:center center}
.hero-l h1{font-size:clamp(32px,9.5vw,46px)}
.hero-l p{font-size:14px;max-width:100%}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="anasayfa.html" class="logo"><img src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html" class="active">Markalarımız</a></li>
<li><a href="#">Sertifikalarımız</a></li>
<li><a href="#">Mağazalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="#" class="h-cta">İletişim</a>
<button class="burger" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li><li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li><li><a href="#">Sertifikalarımız</a></li>
<li><a href="#">Mağazalarımız</a></li><li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<!-- HERO -->
<section class="hero">
<img data-kb-m="markalarimiz1" class="bg" data-slot="hero" src="https://picsum.photos/id/1027/2400/1500" alt="Kozabiat Markaları">
<div class="hero-c">
<div class="hero-tag">Kozabiat Markaları</div>
<h1>Üç marka,<br>tek çatı.</h1>
<p>20 yılı aşkın iç giyim ustalığı; kadında <strong>Dominant</strong>, erkekte <strong>Rockhard</strong>, çocukta <strong>Domikids</strong>. Her biri kendi tarzıyla, aynı kalite anlayışıyla.</p>
</div>
<div class="hero-scroll"></div>
</section>
<!-- MANIFESTO -->
<section class="man">
<div class="man-grid">
<div class="man-l reveal">
<div class="k">Kozabiat Markaları</div>
<h2>İç giyimde <em>rahatlık</em> ve <em>şıklık</em>, tek çatı altında.</h2>
</div>
<div class="man-r reveal">
<p>20 yılı aşkın süredir iç giyim sektörüne hizmet veren <strong>Kozabiat</strong>, iç çamaşırı ve pijama üretiminin yanı sıra kadın iç giyiminde <strong>Dominant</strong>, çocuk iç giyiminde <strong>Domikids</strong>, erkek iç giyiminde ise <strong>Rockhard</strong> markalarını oluşturmuştur.</p>
<p>Kadın iç giyiminde rahatlık ve şıklığı bir arada sunan modelleri Dominant çatısı altında toplarken, çocuk iç giyiminde Domikids markası ile eğlenceli ve ilginç tasarımlara imza atmaya devam etmektedir. Erkek iç giyiminde Rockhard markası ise her geçen gün daha da büyümektedir.</p>
</div>
</div>
</section>
<!-- MARKALAR — sticky scroll story -->
<div class="sw" id="mk">
<section class="story" id="story">
<div class="s-head">Markalarımız</div>
<div class="s-left"><div class="s-items">
<div class="si" data-i="0">
<div class="body">
<span class="cat">Kadın Koleksiyonları</span>
<div class="brand-logo dom"><img src="/media/6e56db5776beb7fe465d89173ad0b113364896fcda9e59332184656a870cf604.svg" alt="Dominant"></div>
<h3>Kadın iç giyiminde rahatlık, şıklık ve modern koleksiyonlar. Günlük konforu zarafetle buluşturan ana markamız.</h3>
</div>
<div class="mm-wrap"><img data-kb-m="markalarimiz2" class="mm" src="https://picsum.photos/seed/dominantkadin/1000/1250" alt="Dominant"><span class="mm-cap">Dominant</span></div>
</div>
<div class="si" data-i="1">
<div class="body">
<span class="cat">Erkek Koleksiyonları</span>
<div class="brand-logo rh"><img src="/media/a98c415d5ccac226ec411f2d7c1680b2e08d0c2be5a155335b9fe2d6477ee310.png" alt="Rockhard"></div>
<h3>Erkek iç giyiminde konfor, kalite ve güçlü tasarım dili. Genç ve dinamik kuşağın markası.</h3>
</div>
<div class="mm-wrap"><img data-kb-m="markalarimiz3" class="mm" src="https://picsum.photos/seed/rockharderkek/1000/1250" alt="Rockhard"><span class="mm-cap">Rockhard</span></div>
</div>
<div class="si" data-i="2">
<div class="body">
<span class="cat">Çocuk Koleksiyonları</span>
<div class="brand-logo dmk"><img src="/media/0fcdf574be7e34887ad5127a929f55d1ccebb6b3e1405e6f001d904a57e4e4d4.svg" alt="Domikids"></div>
<h3>Çocuk iç giyiminde renkli, güvenilir ve rahat ürünler. Yumuşak dokular, güvenli kumaşlar.</h3>
</div>
<div class="mm-wrap"><img data-kb-m="markalarimiz4" class="mm" src="https://picsum.photos/seed/domikidscocuk/1000/1250" alt="Domikids"><span class="mm-cap">Domikids</span></div>
</div>
</div></div>
<div class="s-right" id="sr">
<div class="sm" data-i="0"><img data-kb-m="markalarimiz5" data-slot="dominant" src="https://picsum.photos/seed/dominantkadin/1400/1700" alt="Dominant"><span class="tg t1">Dominant</span><span class="tg t2">Kadın — SS '26</span></div>
<div class="sm" data-i="1"><img data-kb-m="markalarimiz6" data-slot="rockhard" src="https://picsum.photos/seed/rockharderkek/1400/1700" alt="Rockhard"><span class="tg t1">Rockhard</span><span class="tg t2">Erkek — SS '26</span></div>
<div class="sm" data-i="2"><img data-kb-m="markalarimiz7" data-slot="domikids" src="https://picsum.photos/seed/domikidscocuk/1400/1700" alt="Domikids"><span class="tg t1">Domikids</span><span class="tg t2">Çocuk — SS '26</span></div>
<div class="sp" id="sp"><span class="d"></span><span class="d"></span><span class="d"></span></div>
</div>
</section>
</div>
<!-- KAPANIŞ -->
<section class="mclose">
<div class="mclose-in">
<div class="ey reveal">Alışverişe Başlayın</div>
<h2 class="reveal">Üç marka,<br>binlerce ürün.</h2>
<p class="reveal">Bayiler için toptan, bireysel müşteriler için perakende kanallarımızla Kozabiat markaları bir tık uzağınızda.</p>
<div class="btns reveal">
<a href="https://dominantshop.com" target="_blank" class="btn fill">Perakende Satış →</a>
<a href="https://b2b.kozabiat.com" target="_blank" class="btn line">Toptan Satış →</a>
</div>
</div>
</section>
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hakkimizda.html">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html" class="active">Dominant</a></li>
<li><a href="markalarimiz.html" class="active">Rockhard</a></li>
<li><a href="markalarimiz.html" class="active">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html">Basın</a></li>
<li><a href="medya.html">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<script>
(function(){
const R=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
const C=(v,a,b)=>Math.min(b,Math.max(a,v));
const H=document.getElementById('hdr');
const onScroll=()=>H.classList.toggle('scrolled',window.scrollY>40);
window.addEventListener('scroll',onScroll,{passive:true});onScroll();
/* reveal */
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12,rootMargin:'0px 0px -6% 0px'});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* STORY — scroll'a birebir bağlı; reduced-motion'da interpolasyon anlık */
{
const W=document.getElementById('mk');
if(W){
const I=[...document.querySelectorAll('.si')];
const M=[...document.querySelectorAll('.sm')];
const D=[...document.querySelectorAll('#sp .d')];
const panel=document.getElementById('sr');
const story=document.getElementById('story');
const COLS=[[241,242,237],[206,76,26],[231,219,200]]; // Dominant / Rockhard / Domikids
const N=I.length;
const mob=()=>window.innerWidth<=900;
let sm=0,run=false,lastY=window.scrollY,vel=0;
const smoothstep=t=>t*t*(3-2*t);
function tgt(){
const total=W.offsetHeight-window.innerHeight;
const p=C(-W.getBoundingClientRect().top/total,0,1);
return p*(N-1);
}
function draw(s){
I.forEach((el,k)=>{
const d=Math.abs(k-s);
const o=C(1-d*1.35,0,1);
const oe=smoothstep(o);
el.style.opacity=oe;
el.style.transform=`translateY(${(k-s)*46}px)`;
el.style.pointerEvents=oe>.6?'auto':'none';
el.classList.toggle('on',oe>.6);
});
M.forEach((el,k)=>{
const d=Math.abs(k-s);
let o;
if(k<=Math.floor(s)) o=1;
else o=C(1-d,0,1);
const oe=smoothstep(C(o,0,1));
el.style.opacity=oe;
el.style.transform=`translateY(${(1-oe)*4}%) scale(${1+(1-oe)*.03})`;
el.style.zIndex=k;
});
const active=Math.round(s);
D.forEach((d,k)=>d.classList.toggle('on',k===active));
if(!mob()){
const i0=C(Math.floor(s),0,N-1),i1=C(i0+1,0,N-1),f=s-i0;
const m=COLS[i0].map((c,j)=>Math.round(c+(COLS[i1][j]-c)*f));
story.style.background=`rgb(${m[0]},${m[1]},${m[2]})`;
const lum=(m[0]*299+m[1]*587+m[2]*114)/1000;
story.classList.toggle('dark',lum<150);
/* çentik scroll'a bağlı akar: Dominant yukarıda → Domikids aşağıda */
const nc=26+(N>1?s/(N-1):0)*48;
panel.style.clipPath=`polygon(44px 0%,100% 0%,100% 100%,44px 100%,44px ${(nc+26).toFixed(2)}%,0% ${(nc+22.5).toFixed(2)}%,0% ${(nc-22.5).toFixed(2)}%,44px ${(nc-26).toFixed(2)}%)`;
}else{story.style.background='';story.classList.remove('dark');panel.style.clipPath='';}
}
function loop(){
const t=tgt();
if(R) sm=t;
else{
sm+=(t-sm)*.14;
if(Math.abs(t-sm)<.0002)sm=t;
}
draw(sm);
const y=window.scrollY;
if(R){panel.style.transform='';}
else{
vel+=((y-lastY)-vel)*.12;lastY=y;
panel.style.transform=`translateY(${C(vel*-.18,-22,22)}px)`;
}
if(nv())requestAnimationFrame(loop);
else{run=false;panel.style.transform=''}
}
function nv(){const r=W.getBoundingClientRect();return r.bottom>0&&r.top<innerHeight}
function wake(){if(!mob()&&!run&&nv()){run=true;requestAnimationFrame(loop)}}
window.addEventListener('scroll',wake,{passive:true});
window.addEventListener('resize',wake);
wake();draw(0);
}
}
document.querySelectorAll('#mn a').forEach(a=>a.addEventListener('click',()=>document.getElementById('mn').classList.remove('open')));
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sertifikalarımız — Kozabiat Tekstil</title>
<meta name="description" content="Kozabiat kalite ve uygunluk belgeleri: ISO 9001, uluslararası marka tescilleri ve EAC uygunluk sertifikaları.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
::selection{background:var(--teal);color:#fff}
/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);transition:background .4s,border-color .4s,box-shadow .3s}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(4,10,14,.6),rgba(4,10,14,0));opacity:1;transition:opacity .4s}
header.scrolled::before{opacity:0}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.05)}
.h-main{max-width:1560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px)}
.logo{flex-shrink:0}
.logo img{height:46px;width:auto;transition:filter .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;position:relative}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
header.scrolled nav.mn a{color:var(--ink)}
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){nav.mn{display:none}.burger{display:block}}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer}
@media(max-width:560px){.h-cta{display:none}.logo img{height:38px}.h-main{height:64px}}
/* ===== HERO (alt sayfa) ===== */
.hero{position:relative;height:64vh;min-height:460px;overflow:hidden;display:flex;align-items:flex-end;background:var(--panel)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:contrast(1.04) saturate(1.02);animation:heroIn 2s cubic-bezier(.22,1,.36,1) both}
@keyframes heroIn{from{transform:scale(1.05);opacity:.4}to{transform:scale(1);opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,0) 32%,rgba(5,5,5,.08) 55%,rgba(5,5,5,.72) 100%);pointer-events:none}
.hero-c{position:relative;z-index:2;color:#fff;width:100%;max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(44px,7vh,84px)}
.hero-c .crumb{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:20px;animation:ri .9s .2s cubic-bezier(.22,1,.36,1) both}
.hero-c .crumb a:hover{color:#fff}
.hero-c .ey{font-size:11px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--sky);margin-bottom:16px;animation:ri .9s .3s cubic-bezier(.22,1,.36,1) both}
.hero-c h1{font-weight:500;font-size:clamp(42px,6.5vw,96px);line-height:1.02;letter-spacing:-.025em;animation:ri .9s .45s cubic-bezier(.22,1,.36,1) both}
.hero-c p{margin-top:20px;font-size:clamp(14px,1.2vw,16px);max-width:52ch;color:rgba(255,255,255,.9);line-height:1.7;animation:ri .9s .6s cubic-bezier(.22,1,.36,1) both}
@keyframes ri{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* ===== INTRO ===== */
.intro{max-width:1560px;margin:0 auto;padding:clamp(56px,7vw,104px) clamp(20px,4vw,56px) clamp(20px,3vw,40px)}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.intro .qt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:24px;display:flex;align-items:center;gap:14px}
.intro .qt::before{content:"";width:32px;height:2px;background:var(--teal)}
.intro h2{font-weight:500;font-size:clamp(28px,3.4vw,50px);line-height:1.08;letter-spacing:-.02em}
.intro h2 em{font-style:normal;color:var(--teal)}
.intro p{font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:#39464a}
@media(max-width:860px){.intro-grid{grid-template-columns:1fr;gap:24px;align-items:start}}
/* ===== SERTİFİKA GRID ===== */
.certs{max-width:1560px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(20px,4vw,56px) clamp(64px,8vw,120px)}
.cert-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.cert{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);cursor:pointer;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.cert:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(14,20,22,.10);border-color:rgba(18,137,152,.3)}
.cert-img{position:relative;aspect-ratio:1/1.32;background:linear-gradient(180deg,#F4F6F6,#EDF1F1);display:flex;align-items:center;justify-content:center;padding:clamp(20px,2.6vw,36px);overflow:hidden}
.cert-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;box-shadow:0 12px 34px rgba(14,20,22,.16);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cert:hover .cert-img img{transform:scale(1.035)}
.cert-img .zoom{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;background:rgba(10,19,21,.72);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s}
.cert:hover .cert-img .zoom{opacity:1;transform:scale(1)}
.cert-b{padding:clamp(20px,2.2vw,30px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;flex:1}
.cert .tg{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--teal)}
.cert h3{font-weight:600;font-size:clamp(18px,1.7vw,23px);letter-spacing:-.01em;line-height:1.2}
.cert .dsc{font-size:13.5px;line-height:1.65;color:var(--gray);margin-top:2px}
.cert .view{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .25s,gap .25s}
.cert:hover .view{color:var(--teal);gap:13px}
@media(max-width:980px){.cert-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cert-g{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
/* ===== KAPANIŞ STATEMENT ===== */
.stmt{background:var(--panel);color:#fff;position:relative;z-index:2;overflow:hidden}
.stmt::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,rgba(18,137,152,.28),transparent 60%);pointer-events:none}
.stmt-in{position:relative;max-width:1000px;margin:0 auto;padding:clamp(64px,8vw,120px) clamp(20px,4vw,56px);text-align:center}
.stmt .ey{font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--sky);margin-bottom:22px}
.stmt h2{font-weight:500;font-size:clamp(26px,3.4vw,48px);line-height:1.12;letter-spacing:-.02em}
.stmt p{margin:22px auto 0;max-width:60ch;font-size:clamp(14px,1.1vw,16px);line-height:1.8;color:rgba(255,255,255,.72)}
/* ===== LIGHTBOX ===== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,10,12,.92);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,64px);opacity:0;pointer-events:none;transition:opacity .3s}
.lb.open{opacity:1;pointer-events:auto}
.lb figure{position:relative;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px;transform:scale(.96);transition:transform .3s}
.lb.open figure{transform:scale(1)}
.lb img{max-width:88vw;max-height:82vh;object-fit:contain;border-radius:4px;box-shadow:0 40px 100px rgba(0,0,0,.6);background:#fff}
.lb figcaption{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.lb .close{position:absolute;top:clamp(16px,3vw,28px);right:clamp(16px,3vw,32px);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.lb .close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{max-width:1480px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px)}
.ft-col .ft-title{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{max-width:1480px;margin:0 auto;padding:20px clamp(20px,4vw,56px) 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray)}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- mobilde marka/magaza karti: gorsel ustte, baslik gorselin uzerinde ---- */
.mm-wrap{display:contents}
.mm-cap{display:none}
@media(max-width:900px){
.si{display:flex;flex-direction:column;margin-bottom:38px}
.si>.body,.si .body{display:flex;flex-direction:column}
.si .ix{display:none}
.mm-wrap{display:block;position:relative;order:-1;width:100%;
margin:0 0 20px;border-radius:16px;overflow:hidden;background:#0d1416}
.mm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 48%,rgba(8,12,14,.74) 100%)}
.mm-wrap .mm,.mm-wrap img.mm{display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;margin:0;clip-path:none;border-radius:0;min-height:0;max-height:none}
.mm-wrap .mm img{width:100%;height:100%;object-fit:cover}
.mm-cap{display:block;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* metin blogu rahat aksin */
.si .cat{margin-bottom:10px}
.si h3{font-size:clamp(19px,5.2vw,24px);line-height:1.35}
.si .brand-logo{margin:0 0 14px}
.s-meta .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.s-meta .row .k{font-size:10px;letter-spacing:.2em}
.s-meta .row .v{font-size:14px;line-height:1.55}
}
/* ---- hero gorselleri: mobilde daha dengeli kadraj ---- */
@media(max-width:640px){
.hero{min-height:min(74vh,620px)}
.hero img.bg,.hero video.bg,.hero .bg{object-position:center center}
.hero-l h1{font-size:clamp(32px,9.5vw,46px)}
.hero-l p{font-size:14px;max-width:100%}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="anasayfa.html" class="logo"><img src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li>
<li><a href="sertifikalarimiz.html" class="active">Sertifikalarımız</a></li>
<li><a href="#">Mağazalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="#" class="h-cta">İletişim</a>
<button class="burger" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li><li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li><li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="#">Mağazalarımız</a></li><li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<!-- HERO -->
<section class="hero">
<img data-kb-m="sertifikalarimiz1" class="bg" data-slot="hero" src="https://picsum.photos/id/1084/2400/1500" alt="Kozabiat kalite">
<div class="hero-c">
<div class="ey">Kalite & Güven</div>
<h1>Sertifikalarımız</h1>
<p>Uluslararası kalite yönetimi, marka tescili ve ürün uygunluğu belgelerimizle; ürettiğimiz her ürünün arkasındayız.</p>
</div>
</section>
<!-- INTRO -->
<section class="intro">
<div class="intro-grid">
<div class="reveal">
<div class="qt">Belgelerimiz</div>
<h2>Kalite bir <em>söz</em> değil, belgelenmiş bir <em>standart</em>tır.</h2>
</div>
<div class="reveal">
<p>ISO 9001 kalite yönetim sisteminden uluslararası marka tescillerine, EAC ürün uygunluk sertifikalarından üretim standartlarına kadar; Kozabiat tüm süreçlerini bağımsız denetimlerle belgelendirir. Aşağıdaki belgelere tıklayarak büyütebilirsiniz.</p>
</div>
</div>
</section>
<!-- SERTİFİKA GRID -->
<section class="certs">
<div class="cert-g" id="certGrid">
<div class="cert reveal" data-full="https://www.kozabiat.com/uploads/genelresim/b_iso-9001-2934.jpg" data-title="ISO 9001 — Kalite Yönetim Sistemi">
<div class="cert-img"><img data-kb-m="sertifikalarimiz2" src="https://www.kozabiat.com/uploads/genelresim/b_iso-9001-2934.jpg" alt="ISO 9001 Sertifikası" loading="lazy"><span class="zoom">⤢</span></div>
<div class="cert-b"><span class="tg">Kalite Sistemi</span><h3>ISO 9001</h3><div class="dsc">Kalite yönetim sistemi belgesi.</div><span class="view">Görüntüle →</span></div>
</div>
<div class="cert reveal" data-full="https://www.kozabiat.com/uploads/genelresim/b_ua-tescil-belgesi-1796.jpg" data-title="Uluslararası Marka Tescil Belgesi">
<div class="cert-img"><img data-kb-m="sertifikalarimiz3" src="https://www.kozabiat.com/uploads/genelresim/b_ua-tescil-belgesi-1796.jpg" alt="Uluslararası Tescil Belgesi" loading="lazy"><span class="zoom">⤢</span></div>
<div class="cert-b"><span class="tg">Marka Tescili</span><h3>Uluslararası Tescil Belgesi</h3><div class="dsc">Uluslararası marka tescil kaydı.</div><span class="view">Görüntüle →</span></div>
</div>
<div class="cert reveal" data-full="https://www.kozabiat.com/uploads/genelresim/b_sertifikalarimiz_62360.jpg" data-title="Uluslararası Marka Tescil Belgesi">
<div class="cert-img"><img data-kb-m="sertifikalarimiz4" src="https://www.kozabiat.com/uploads/genelresim/b_sertifikalarimiz_62360.jpg" alt="Uluslararası Tescil Belgesi" loading="lazy"><span class="zoom">⤢</span></div>
<div class="cert-b"><span class="tg">Marka Tescili</span><h3>Uluslararası Tescil Belgesi</h3><div class="dsc">Uluslararası marka tescil kaydı.</div><span class="view">Görüntüle →</span></div>
</div>
<div class="cert reveal" data-full="https://www.kozabiat.com/uploads/genelresim/b_sertifikalarimiz_50850.jpg" data-title="Uluslararası Marka Tescil Belgesi">
<div class="cert-img"><img data-kb-m="sertifikalarimiz5" src="https://www.kozabiat.com/uploads/genelresim/b_sertifikalarimiz_50850.jpg" alt="Uluslararası Tescil Belgesi" loading="lazy"><span class="zoom">⤢</span></div>
<div class="cert-b"><span class="tg">Marka Tescili</span><h3>Uluslararası Tescil Belgesi</h3><div class="dsc">Uluslararası marka tescil kaydı.</div><span class="view">Görüntüle →</span></div>
</div>
<div class="cert reveal" data-full="https://www.kozabiat.com/uploads/genelresim/b_sertifikalarimiz-4460.jpg" data-title="EAC Uygunluk Belgesi — Bay / Bayan">
<div class="cert-img"><img data-kb-m="sertifikalarimiz6" src="https://www.kozabiat.com/uploads/genelresim/b_sertifikalarimiz-4460.jpg" alt="EAC Bay/Bayan Belgesi" loading="lazy"><span class="zoom">⤢</span></div>
<div class="cert-b"><span class="tg">Ürün Uygunluğu · EAC</span><h3>EAC — Bay / Bayan</h3><div class="dsc">Avrasya Ekonomik Birliği uygunluk belgesi.</div><span class="view">Görüntüle →</span></div>
</div>
<div class="cert reveal" data-full="https://www.kozabiat.com/uploads/genelresim/b_eac-1984.jpg" data-title="EAC Uygunluk Belgesi — Erkek / Kız Çocuk">
<div class="cert-img"><img data-kb-m="sertifikalarimiz7" src="https://www.kozabiat.com/uploads/genelresim/b_eac-1984.jpg" alt="EAC Erkek/Kız Çocuk Belgesi" loading="lazy"><span class="zoom">⤢</span></div>
<div class="cert-b"><span class="tg">Ürün Uygunluğu · EAC</span><h3>EAC — Erkek / Kız Çocuk</h3><div class="dsc">Avrasya Ekonomik Birliği uygunluk belgesi.</div><span class="view">Görüntüle →</span></div>
</div>
</div>
</section>
<!-- KAPANIŞ -->
<section class="stmt">
<div class="stmt-in">
<div class="ey reveal">Kalite Politikamız</div>
<h2 class="reveal">Her belge, her dikişte verdiğimiz sözün karşılığıdır.</h2>
<p class="reveal">Uluslararası standartlara uygun üretim, bağımsız denetim ve sürekli iyileştirme; Kozabiat'ın üç markasında da değişmeyen kalite anlayışının temelidir.</p>
</div>
</section>
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hakkimizda.html">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html">Dominant</a></li>
<li><a href="markalarimiz.html">Rockhard</a></li>
<li><a href="markalarimiz.html">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html" class="active">Sertifikalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html">Basın</a></li>
<li><a href="medya.html">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<!-- LIGHTBOX -->
<div class="lb" id="lb">
<button class="close" id="lbClose" aria-label="Kapat">×</button>
<figure><img id="lbImg" src="" alt=""><figcaption id="lbCap"></figcaption></figure>
</div>
<script>
(function(){
const H=document.getElementById('hdr');
const onScroll=()=>H.classList.toggle('scrolled',window.scrollY>40);
window.addEventListener('scroll',onScroll,{passive:true});onScroll();
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12,rootMargin:'0px 0px -6% 0px'});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* LIGHTBOX */
const lb=document.getElementById('lb'),lbImg=document.getElementById('lbImg'),lbCap=document.getElementById('lbCap');
function open(src,cap){lbImg.src=src;lbImg.alt=cap||'';lbCap.textContent=cap||'';lb.classList.add('open');document.body.style.overflow='hidden';}
function close(){lb.classList.remove('open');document.body.style.overflow='';setTimeout(()=>{lbImg.src='';},300);}
document.querySelectorAll('.cert').forEach(c=>c.addEventListener('click',()=>open(c.dataset.full,c.dataset.title)));
document.getElementById('lbClose').addEventListener('click',close);
lb.addEventListener('click',e=>{if(e.target===lb)close();});
document.addEventListener('keydown',e=>{if(e.key==='Escape')close();});
document.querySelectorAll('#mn a').forEach(a=>a.addEventListener('click',()=>document.getElementById('mn').classList.remove('open')));
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mağazalarımız — Kozabiat Tekstil</title>
<meta name="description" content="Kozabiat mağaza ve ofisleri: Çekmeköy Merkez Ofis, Zeytinburnu ve Yeşildirek. Adres, telefon, çalışma saatleri ve yol tarifi.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
::selection{background:var(--teal);color:#fff}
/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);transition:background .4s,border-color .4s,box-shadow .3s}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(4,10,14,.6),rgba(4,10,14,0));opacity:1;transition:opacity .4s}
header.scrolled::before{opacity:0}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.05)}
.h-main{max-width:1560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px)}
.logo{flex-shrink:0}
.logo img{height:46px;width:auto;transition:filter .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;position:relative}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
header.scrolled nav.mn a{color:var(--ink)}
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){nav.mn{display:none}.burger{display:block}}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer}
@media(max-width:560px){.h-cta{display:none}.logo img{height:38px}.h-main{height:64px}}
/* ===== HERO ===== */
.hero{position:relative;height:64vh;min-height:460px;overflow:hidden;display:flex;align-items:flex-end;background:var(--panel)}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:contrast(1.04) saturate(1.02);animation:heroIn 2s cubic-bezier(.22,1,.36,1) both}
@keyframes heroIn{from{transform:scale(1.05);opacity:.4}to{transform:scale(1);opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,0) 32%,rgba(5,5,5,.08) 55%,rgba(5,5,5,.72) 100%);pointer-events:none}
.hero-c{position:relative;z-index:2;color:#fff;width:100%;max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,56px) clamp(44px,7vh,84px)}
.hero-c .crumb{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:20px;animation:ri .9s .2s cubic-bezier(.22,1,.36,1) both}
.hero-c .crumb a:hover{color:#fff}
.hero-c .ey{font-size:11px;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--sky);margin-bottom:16px;animation:ri .9s .3s cubic-bezier(.22,1,.36,1) both}
.hero-c h1{font-weight:500;font-size:clamp(42px,6.5vw,96px);line-height:1.02;letter-spacing:-.025em;animation:ri .9s .45s cubic-bezier(.22,1,.36,1) both}
.hero-c p{margin-top:20px;font-size:clamp(14px,1.2vw,16px);max-width:52ch;color:rgba(255,255,255,.9);line-height:1.7;animation:ri .9s .6s cubic-bezier(.22,1,.36,1) both}
@keyframes ri{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* ===== INTRO (kısa) ===== */
.intro{max-width:1560px;margin:0 auto;padding:clamp(56px,7vw,104px) clamp(20px,4vw,56px) 0}
.intro .qt{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--teal);margin-bottom:22px;display:flex;align-items:center;gap:14px}
.intro .qt::before{content:"";width:32px;height:2px;background:var(--teal)}
.intro h2{font-weight:500;font-size:clamp(28px,3.4vw,52px);line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.intro h2 em{font-style:normal;color:var(--teal)}
.intro .hint{margin-top:18px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--gray);display:flex;align-items:center;gap:9px}
.intro .hint::before{content:"";width:16px;height:16px;border:1.5px solid var(--gray);border-radius:50%;display:inline-block;background:radial-gradient(circle,var(--gray) 26%,transparent 30%)}
/* ===== MAĞAZALAR — sticky scroll story ===== */
.sw{height:430vh;position:relative;background:var(--bg)}
.story{position:sticky;top:0;height:100vh;overflow:hidden;transition:background .12s linear}
.s-head{position:absolute;z-index:5;top:clamp(98px,13vh,132px);left:clamp(20px,6vw,120px);font-size:13px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:14px;transition:color .35s ease}
.s-head::before{content:"";width:36px;height:2px;background:var(--teal);transition:background .35s ease}
.story.dark .s-head{color:#fff}.story.dark .s-head::before{background:#fff}
.story.dark .si .cat{color:#fff}
.story.dark .si h3{color:#fff}
.story.dark .si .s-meta .v{color:rgba(255,255,255,.9)}
.story.dark .si .s-meta .k{color:rgba(255,255,255,.62)}
.story.dark .si .go{color:#fff;border-color:#fff}
.s-left{position:absolute;left:0;top:0;bottom:0;width:48%;display:flex;align-items:center;padding:clamp(130px,16vh,190px) 4vw clamp(56px,8vh,90px) clamp(20px,6vw,120px)}
.s-items{position:relative;width:100%;height:58vh;min-height:420px}
.si{position:absolute;inset:0;display:flex;align-items:center;opacity:0;will-change:opacity,transform;pointer-events:none}
.si.on{pointer-events:auto}
.si .body{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.si .cat{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:16px;transition:color .35s ease}
.si h3{font-weight:600;font-size:clamp(32px,3.7vw,58px);line-height:1.04;letter-spacing:-.025em;color:var(--ink);margin-bottom:30px;transition:color .35s ease}
.s-meta{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.s-meta .row{display:flex;gap:18px;align-items:baseline}
.s-meta .k{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);min-width:76px;flex-shrink:0;transition:color .35s ease}
.s-meta .v{font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:#39464a;max-width:46ch;transition:color .35s ease}
.s-meta .v a:hover{color:var(--teal)}
.si .go{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:6px;transition:color .25s,border-color .25s}
.si .go:hover{color:var(--teal);border-color:var(--teal)}
.s-right{position:absolute;right:0;top:0;bottom:0;width:56%;background:var(--panel);clip-path:polygon(44px 0%,100% 0%,100% 100%,44px 100%,44px 76%,0% 72.5%,0% 27.5%,44px 24%);overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sm{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.sm img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
.sm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.14) 0%,rgba(5,5,5,0) 40%,rgba(5,5,5,.34) 100%)}
.sm .tg{position:absolute;z-index:3;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px}
.sm .tg::before{content:"·";font-size:18px;line-height:0}
.sm .t1{left:8%;bottom:14%}.sm .t2{right:8%;top:16%;color:var(--sky)}
.sp{position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:10px}
.sp .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,height .3s,border-radius .3s}
.sp .d.on{background:var(--sky);height:22px;border-radius:4px}
.mm{display:none}
@media(max-width:900px){
.sw{height:auto}
.story{position:relative;height:auto;overflow:visible;background:var(--bg)!important}
.s-head{position:relative;top:auto;left:auto;padding:96px clamp(20px,5vw,40px) 0}
.s-left{position:relative;width:100%;padding:24px clamp(20px,5vw,40px) 0;display:block}
.s-items{height:auto;min-height:0}
.si{position:relative;opacity:1!important;transform:none!important;pointer-events:auto;margin-bottom:48px;align-items:flex-start;transition:none}
.story.dark .si .cat{color:var(--teal)}
.story.dark .si h3{color:var(--ink)}
.story.dark .si .s-meta .v{color:#39464a}
.story.dark .si .s-meta .k{color:var(--teal)}
.story.dark .si .go{color:var(--ink);border-color:var(--ink)}
.s-right,.sp{display:none}
.mm{display:block;overflow:hidden;aspect-ratio:16/11;margin:22px 0 34px;background:var(--panel);clip-path:polygon(24px 0%,100% 0%,100% 100%,24px 100%,24px 78%,0% 75%,0% 25%,24px 22%)}
.mm img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02)}
}
@media(min-width:901px){.mm{display:none}}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{max-width:1480px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px)}
.ft-col .ft-title{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{max-width:1480px;margin:0 auto;padding:20px clamp(20px,4vw,56px) 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray)}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- mobilde marka/magaza karti: gorsel ustte, baslik gorselin uzerinde ---- */
.mm-wrap{display:contents}
.mm-cap{display:none}
@media(max-width:900px){
.si{display:flex;flex-direction:column;margin-bottom:38px}
.si>.body,.si .body{display:flex;flex-direction:column}
.si .ix{display:none}
.mm-wrap{display:block;position:relative;order:-1;width:100%;
margin:0 0 20px;border-radius:16px;overflow:hidden;background:#0d1416}
.mm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 48%,rgba(8,12,14,.74) 100%)}
.mm-wrap .mm,.mm-wrap img.mm{display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;margin:0;clip-path:none;border-radius:0;min-height:0;max-height:none}
.mm-wrap .mm img{width:100%;height:100%;object-fit:cover}
.mm-cap{display:block;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* metin blogu rahat aksin */
.si .cat{margin-bottom:10px}
.si h3{font-size:clamp(19px,5.2vw,24px);line-height:1.35}
.si .brand-logo{margin:0 0 14px}
.s-meta .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.s-meta .row .k{font-size:10px;letter-spacing:.2em}
.s-meta .row .v{font-size:14px;line-height:1.55}
}
/* ---- hero gorselleri: mobilde daha dengeli kadraj ---- */
@media(max-width:640px){
.hero{min-height:min(74vh,620px)}
.hero img.bg,.hero video.bg,.hero .bg{object-position:center center}
.hero-l h1{font-size:clamp(32px,9.5vw,46px)}
.hero-l p{font-size:14px;max-width:100%}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="anasayfa.html" class="logo"><img src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="magazalarimiz.html" class="active">Mağazalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="#" class="h-cta">İletişim</a>
<button class="burger" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li><li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li><li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li><li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<!-- HERO -->
<section class="hero">
<img data-kb-m="magazalarimiz1" class="bg" data-slot="hero" src="https://picsum.photos/id/1057/2400/1500" alt="Kozabiat mağazaları — İstanbul">
<div class="hero-c">
<div class="ey">Bize Yakın</div>
<h1>Mağazalarımız</h1>
<p>İstanbul'un üç noktasında; ofisimiz ve mağazalarımızla kapımız size açık. Adres, çalışma saatleri ve yol tarifi bir tık uzağınızda.</p>
</div>
</section>
<!-- INTRO -->
<section class="intro">
<div class="reveal">
<div class="qt">Mağaza & Ofisler</div>
<h2>İstanbul'da <em>üç adres</em>, tek anlayış.</h2>
</div>
</section>
<!-- MAĞAZALAR — sticky scroll story -->
<div class="sw" id="mk">
<section class="story" id="story">
<div class="s-head">Mağazalarımız</div>
<div class="s-left"><div class="s-items">
<div class="si" data-i="0">
<div class="body">
<span class="cat">Çekmeköy / İstanbul</span>
<h3>Merkez Ofis</h3>
<div class="s-meta">
<div class="row"><span class="k">Adres</span><span class="v">Merkez Mah. Çavuşbaşı Cd. Aytekin Sk. No:2</span></div>
<div class="row"><span class="k">Telefon</span><span class="v"><a href="tel:+902165277178">+90 (216) 527 71 78</a></span></div>
<div class="row"><span class="k">Saatler</span><span class="v">Pzt – Cuma · 08:00 – 18:30</span></div>
</div>
<a class="go" target="_blank" rel="noopener" href="https://www.google.com/maps/dir/?api=1&destination=Çavuşbaşı+Cd.+Aytekin+Sk.+No:2+Çekmeköy+İstanbul">Yol Tarifi Al →</a>
</div>
<div class="mm-wrap"><img data-kb-m="magazalarimiz2" class="mm" src="https://www.kozabiat.com/uploads/genelresim/b_merkez-ofis-2690.png" alt="Merkez Ofis"><span class="mm-cap">Merkez Ofis</span></div>
</div>
<div class="si" data-i="1">
<div class="body">
<span class="cat">Zeytinburnu / İstanbul</span>
<h3>Zeytinburnu</h3>
<div class="s-meta">
<div class="row"><span class="k">Adres</span><span class="v">Telsiz Mah. Balıklı Yolu Sk. No:42/1</span></div>
<div class="row"><span class="k">Telefon</span><span class="v"><a href="tel:+902125102757">+90 (212) 510 27 57</a></span></div>
<div class="row"><span class="k">Saatler</span><span class="v">Pzt – Cuma · 08:00 – 18:00 · Cmt · 08:00 – 13:00</span></div>
</div>
<a class="go" target="_blank" rel="noopener" href="https://www.google.com/maps/dir/?api=1&destination=Telsiz+Mah.+Balıklı+Yolu+Sk.+No:42+Zeytinburnu+İstanbul">Yol Tarifi Al →</a>
</div>
<div class="mm-wrap"><img data-kb-m="magazalarimiz3" class="mm" src="https://www.kozabiat.com/uploads/genelresim/b_zeytinburnu-9557.jpeg" alt="Zeytinburnu"><span class="mm-cap">Zeytinburnu</span></div>
</div>
<div class="si" data-i="2">
<div class="body">
<span class="cat">Fatih / İstanbul</span>
<h3>Yeşildirek</h3>
<div class="s-meta">
<div class="row"><span class="k">Adres</span><span class="v">Sururi Mah. Tarakçı Caferağa Sk. Niğde Han No:3 İç Kapı No:15</span></div>
<div class="row"><span class="k">Telefon</span><span class="v"><a href="tel:+902125111201">+90 (212) 511 12 01</a></span></div>
<div class="row"><span class="k">Saatler</span><span class="v">Pzt – Cuma · 08:00 – 18:00 · Cmt · 08:00 – 13:00</span></div>
</div>
<a class="go" target="_blank" rel="noopener" href="https://www.google.com/maps/dir/?api=1&destination=Sururi+Mah.+Tarakçı+Caferağa+Sk.+Yeşildirek+Fatih+İstanbul">Yol Tarifi Al →</a>
</div>
<div class="mm-wrap"><img data-kb-m="magazalarimiz4" class="mm" src="https://www.kozabiat.com/uploads/genelresim/b_yesildirek-5835.jpeg" alt="Yeşildirek"><span class="mm-cap">Yeşildirek</span></div>
</div>
</div></div>
<div class="s-right" id="sr">
<div class="sm" data-i="0"><img data-kb-m="magazalarimiz5" src="https://www.kozabiat.com/uploads/genelresim/b_merkez-ofis-2690.png" alt="Merkez Ofis"><span class="tg t1">Merkez Ofis</span><span class="tg t2">Çekmeköy</span></div>
<div class="sm" data-i="1"><img data-kb-m="magazalarimiz6" src="https://www.kozabiat.com/uploads/genelresim/b_zeytinburnu-9557.jpeg" alt="Zeytinburnu"><span class="tg t1">Zeytinburnu</span><span class="tg t2">İstanbul</span></div>
<div class="sm" data-i="2"><img data-kb-m="magazalarimiz7" src="https://www.kozabiat.com/uploads/genelresim/b_yesildirek-5835.jpeg" alt="Yeşildirek"><span class="tg t1">Yeşildirek</span><span class="tg t2">Fatih</span></div>
<div class="sp" id="sp"><span class="d"></span><span class="d"></span><span class="d"></span></div>
</div>
</section>
</div>
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hakkimizda.html">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html">Dominant</a></li>
<li><a href="markalarimiz.html">Rockhard</a></li>
<li><a href="markalarimiz.html">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html">Basın</a></li>
<li><a href="medya.html">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html" class="active">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<script>
(function(){
const R=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
const C=(v,a,b)=>Math.min(b,Math.max(a,v));
const H=document.getElementById('hdr');
const onScroll=()=>H.classList.toggle('scrolled',window.scrollY>40);
window.addEventListener('scroll',onScroll,{passive:true});onScroll();
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12,rootMargin:'0px 0px -6% 0px'});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* STORY — scroll'a birebir bağlı; reduced-motion'da interpolasyon anlık */
{
const W=document.getElementById('mk');
if(W){
const I=[...document.querySelectorAll('.si')];
const M=[...document.querySelectorAll('.sm')];
const D=[...document.querySelectorAll('#sp .d')];
const panel=document.getElementById('sr');
const story=document.getElementById('story');
/* her mağaza için hafif zemin tonu (açık — yazılar koyu kalır) */
const COLS=[[252,253,253],[247,249,249],[250,248,245]];
const N=I.length;
const mob=()=>window.innerWidth<=900;
let sm=0,run=false,lastY=window.scrollY,vel=0;
const smoothstep=t=>t*t*(3-2*t);
function tgt(){
const total=W.offsetHeight-window.innerHeight;
const p=C(-W.getBoundingClientRect().top/total,0,1);
return p*(N-1);
}
function draw(s){
I.forEach((el,k)=>{
const d=Math.abs(k-s);
const o=C(1-d*1.35,0,1);
const oe=smoothstep(o);
el.style.opacity=oe;
el.style.transform=`translateY(${(k-s)*46}px)`;
el.style.pointerEvents=oe>.6?'auto':'none';
el.classList.toggle('on',oe>.6);
});
M.forEach((el,k)=>{
const d=Math.abs(k-s);
let o;
if(k<=Math.floor(s)) o=1;
else o=C(1-d,0,1);
const oe=smoothstep(C(o,0,1));
el.style.opacity=oe;
el.style.transform=`translateY(${(1-oe)*4}%) scale(${1+(1-oe)*.03})`;
el.style.zIndex=k;
});
const active=Math.round(s);
D.forEach((d,k)=>d.classList.toggle('on',k===active));
if(!mob()){
const i0=C(Math.floor(s),0,N-1),i1=C(i0+1,0,N-1),f=s-i0;
const m=COLS[i0].map((c,j)=>Math.round(c+(COLS[i1][j]-c)*f));
story.style.background=`rgb(${m[0]},${m[1]},${m[2]})`;
const lum=(m[0]*299+m[1]*587+m[2]*114)/1000;
story.classList.toggle('dark',lum<150);
/* çentik scroll'a bağlı akar: ilk mağaza yukarıda → son mağaza aşağıda */
const nc=26+(N>1?s/(N-1):0)*48;
panel.style.clipPath=`polygon(44px 0%,100% 0%,100% 100%,44px 100%,44px ${(nc+26).toFixed(2)}%,0% ${(nc+22.5).toFixed(2)}%,0% ${(nc-22.5).toFixed(2)}%,44px ${(nc-26).toFixed(2)}%)`;
}else{story.style.background='';story.classList.remove('dark');panel.style.clipPath='';}
}
function loop(){
const t=tgt();
if(R) sm=t;
else{
sm+=(t-sm)*.14;
if(Math.abs(t-sm)<.0002)sm=t;
}
draw(sm);
const y=window.scrollY;
if(R){panel.style.transform='';}
else{
vel+=((y-lastY)-vel)*.12;lastY=y;
panel.style.transform=`translateY(${C(vel*-.18,-22,22)}px)`;
}
if(nv())requestAnimationFrame(loop);
else{run=false;panel.style.transform=''}
}
function nv(){const r=W.getBoundingClientRect();return r.bottom>0&&r.top<innerHeight}
function wake(){if(!mob()&&!run&&nv()){run=true;requestAnimationFrame(loop)}}
window.addEventListener('scroll',wake,{passive:true});
window.addEventListener('resize',wake);
wake();draw(0);
}
}
document.querySelectorAll('#mn a').forEach(a=>a.addEventListener('click',()=>document.getElementById('mn').classList.remove('open')));
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kozabiat Medya — Haberler, Fuarlar, Tanıtım Filmleri</title>
<meta name="description" content="Kozabiat Medya: haberler, fuar katılımları ve tanıtım filmleri tek çatı altında.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--wash:#F4F7F7;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
--serif:'Playfair Display',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
/* ===== STICKY HEADER (siteyle birebir) ===== */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);transition:background .4s,border-color .4s,box-shadow .3s}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(4,10,14,.6),rgba(4,10,14,0));opacity:1;transition:opacity .4s}
header.scrolled::before{opacity:0}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.05)}
.h-main{max-width:1560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px)}
.logo{flex-shrink:0;display:flex;align-items:center;line-height:0}
.logo .kb-logo{height:50px;width:auto;display:block;transition:filter .4s}
/* koyu (transparan) header: siyah wordmark beyaza dönsün, renkler kalsın */
header .logo .kbl0{fill:#040007;transition:fill .4s}header .logo .kbl1{fill:#050008;transition:fill .4s}
/* koyu header'da ince siyah stroke'u da beyazlat */
header .logo .kbl2{stroke:#000000;transition:stroke .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;position:relative}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
header.scrolled nav.mn a{color:var(--ink)}
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){nav.mn{display:none}.burger{display:block}}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer;color:var(--ink)}
@media(max-width:560px){.h-cta{display:none}.logo .kb-logo{height:40px}.h-main{height:64px}}
/* ===== MASTHEAD (haberler başlığı — editoryal) ===== */
.masthead{position:relative;padding:calc(78px + clamp(56px,8vw,120px)) clamp(20px,4vw,56px) clamp(40px,5vw,64px);background:var(--panel);color:#fff;overflow:hidden}
.masthead::after{content:"";position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:0;height:1px;background:rgba(255,255,255,.14)}
.mh-in{max-width:1480px;margin:0 auto;position:relative;z-index:2}
.mh-crumb{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);display:flex;align-items:center;gap:10px}
.mh-crumb a{opacity:.75;transition:opacity .2s}.mh-crumb a:hover{opacity:1}
.mh-crumb .slash{opacity:.4}
.mh-eyebrow{margin-top:26px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.masthead h1{font-family:var(--serif);font-weight:600;line-height:.98;letter-spacing:-.01em;font-size:clamp(46px,9vw,120px);margin-top:14px}
.masthead h1 em{font-style:italic;font-weight:400;color:var(--sky)}
.mh-lead{margin-top:24px;max-width:60ch;font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.72);font-weight:300}
.mh-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:28px}
.mh-stat .n{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1}
.mh-stat .l{margin-top:6px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* ===== FILTER BAR ===== */
/* ===== SHELL ===== */
.shell{max-width:1480px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(20px,4vw,56px) clamp(64px,7vw,110px)}
/* Featured lead story */
.lead-tag{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.lead-tag::after{content:"";flex:1;height:1px;background:var(--line)}
.feature{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;margin-bottom:clamp(56px,7vw,96px)}
.feature .ph{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--wash)}
.feature .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.feature:hover .ph img{transform:scale(1.04)}
.feature .cat{position:absolute;top:18px;left:18px;background:var(--teal);color:#fff;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:7px}
.feature .body .date{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.feature .body h2{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;font-size:clamp(30px,4vw,52px);margin:16px 0 20px}
.feature .body p{font-size:clamp(15px,1.3vw,17px);line-height:1.75;color:var(--gray);max-width:52ch}
.readmore{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:gap .25s,color .25s}
.readmore .arw{transition:transform .25s}
.readmore:hover{color:var(--teal);gap:16px}
.readmore:hover .arw{transform:translateX(3px)}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:26px}}
/* Grid */
.grid-tag{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:26px;display:flex;align-items:center;gap:12px}
.grid-tag::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(14,20,22,.09);border-color:transparent}
.card .ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--wash)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{transform:scale(1.05)}
.card .cat{position:absolute;top:14px;left:14px;background:rgba(252,253,253,.92);backdrop-filter:blur(6px);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:6px}
.card .c-body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;flex:1}
.card .date{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.card h3{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.005em;font-size:clamp(20px,1.7vw,24px);margin:12px 0 12px}
.card p{font-size:14px;line-height:1.65;color:var(--gray);flex:1}
.card .readmore{margin-top:22px;font-size:11px}
.card.hide{display:none}
/* Newsletter CTA */
.news-cta{margin-top:clamp(64px,8vw,110px);background:var(--panel);color:#fff;border-radius:20px;padding:clamp(38px,5vw,68px);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative;overflow:hidden}
.news-cta::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(circle,rgba(116,201,227,.18),transparent 62%);pointer-events:none}
.news-cta .k{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sky)}
.news-cta h2{font-family:var(--serif);font-weight:600;line-height:1.06;font-size:clamp(26px,3.2vw,40px);margin:14px 0 14px;position:relative;z-index:2}
.news-cta p{font-size:15px;line-height:1.7;color:rgba(255,255,255,.66);max-width:44ch;font-weight:300;position:relative;z-index:2}
.nc-form{display:flex;gap:10px;position:relative;z-index:2;flex-wrap:wrap}
.nc-form input{flex:1;min-width:200px;padding:15px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-family:var(--sans);font-size:14px}
.nc-form input::placeholder{color:rgba(255,255,255,.5)}
.nc-form input:focus{outline:none;border-color:var(--sky);background:rgba(255,255,255,.1)}
.nc-form button{padding:15px 26px;border-radius:10px;border:0;background:var(--teal);color:#fff;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s}
.nc-form button:hover{background:#0f7683;transform:translateY(-1px)}
.nc-note{margin-top:14px;font-size:11px;color:rgba(255,255,255,.45);position:relative;z-index:2}
@media(max-width:820px){.news-cta{grid-template-columns:1fr}}
/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* ===== FOOTER (siteyle birebir) ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{max-width:1480px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px)}
.ft-col .ft-title{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{max-width:1480px;margin:0 auto;padding:20px clamp(20px,4vw,56px) 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray)}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ================= KOZABIAT MEDYA ================= */
:root{--mbg:#0A1315;--mcard:#131C1E;--mcard2:#182325;--mline:rgba(255,255,255,.10)}
/* --- karsilama: arka planda medya, uzerinde tek baslik --- */
.mhero{position:relative;overflow:hidden;background:#0A1315;color:#fff;
min-height:min(78vh,660px);display:flex;align-items:flex-end;
padding:clamp(120px,16vh,180px) clamp(20px,5vw,64px) clamp(48px,7vh,76px)}
.mhero-med{position:absolute;inset:0;z-index:0}
.mhero-med img,.mhero-med video{width:100%;height:100%;object-fit:cover;display:block}
.mhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,.52) 0%,rgba(8,12,14,.14) 38%,rgba(8,12,14,.72) 100%)}
.mhero-in{position:relative;z-index:2;max-width:1560px;margin:0 auto;width:100%}
.mhero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.02;
font-size:clamp(40px,7vw,96px);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.42)}
.mhero h1 em{font-style:normal;color:var(--sky)}
/* --- bolumler (beyaz zemin) --- */
.mzones{background:var(--bg);padding:clamp(56px,8vh,96px) 0 clamp(40px,6vh,72px)}
.mzone+.mzone{margin-top:clamp(56px,8vh,100px)}
.mzone{scroll-margin-top:90px}
.mz-head{max-width:1560px;margin:0 auto clamp(20px,2.6vh,30px);padding:0 clamp(20px,5vw,64px)}
.mz-h{font-weight:600;letter-spacing:-.02em;line-height:1.14;
font-size:clamp(24px,3vw,40px);color:var(--ink)}
.mz-h .dim{color:var(--gray);font-weight:600}
/* --- slider --- */
.mz-wrap{position:relative}
.mz-rail{overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.mz-rail::-webkit-scrollbar{display:none}
.mz-track{display:flex;gap:clamp(14px,1.4vw,22px);
padding:6px clamp(20px,5vw,64px) 14px;width:max-content}
.mz-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
background:rgba(232,238,239,.92);color:#4a5658;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 4px 16px rgba(14,20,22,.12);
display:flex;align-items:center;justify-content:center;
transition:background .28s,color .28s,opacity .28s,visibility .28s}
.mz-ar:hover{background:#fff;color:var(--ink)}
.mz-ar.prev{left:clamp(8px,2vw,22px)}
.mz-ar.next{right:clamp(8px,2vw,22px)}
.mz-ar[disabled]{opacity:0;visibility:hidden;pointer-events:none}
@media(hover:none){.mz-ar{display:none}}
/* --- kart: gorsel tam, baslik gorselin uzerinde altta --- */
.mcard{position:relative;flex:0 0 clamp(258px,24vw,340px);cursor:pointer;
aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:#0d1416;display:block;
transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.mcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(14,20,22,.18)}
.mcard:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.mc-ph{position:absolute;inset:0}
.mc-ph img,.mc-ph video{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mcard:hover .mc-ph img,.mcard:hover .mc-ph video{transform:scale(1.06)}
/* okunurluk icin alttan yukari koyulasan perde */
.mc-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 34%,rgba(8,12,14,.38) 58%,rgba(8,12,14,.86) 100%)}
.mc-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:clamp(20px,1.8vw,26px);display:flex;flex-direction:column;gap:9px}
.mc-tag{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,255,255,.82)}
.mcard h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;
font-size:clamp(19px,1.5vw,23px);line-height:1.26;color:#fff;
text-shadow:0 1px 14px rgba(0,0,0,.4);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.mcard{flex-basis:72vw}}
/* --- e-bulten --- */
.mzones + .shell{padding-bottom:clamp(56px,8vh,90px)}
/* ===== film kartlarindaki oynat rozeti ===== */
.rd-fig{position:relative}
.rd-fig video{width:100%;height:auto;border-radius:14px;display:block;background:#0d1416}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- medya sayfasi: kucuk ekran ---- */
@media(max-width:640px){
.mhero{min-height:58vh;padding:104px 20px 36px}
.mhero h1{font-size:clamp(30px,10vw,44px)}
.mzones{padding-top:44px}
.mzone+.mzone{margin-top:48px}
.mz-head{padding:0 20px;margin-bottom:16px}
.mz-h{font-size:clamp(20px,6.4vw,28px)}
.mz-track{padding-left:20px;padding-right:20px;gap:12px}
.mcard h3{font-size:17px;-webkit-line-clamp:4}
.mc-txt{padding:16px}
.rd-top{height:58px;padding:0 18px}
.rd-art{padding:32px 20px 0}
.rd-more{padding:34px 20px 64px;margin-top:44px}
.rd-more-grid{grid-template-columns:1fr}
.rd-body .rd-gal{grid-template-columns:1fr;gap:10px}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="anasayfa.html" class="logo" aria-label="Kozabiat Anasayfa"><img class="kb-logo" src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
<li><a href="medya.html" class="active">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="#" class="h-cta">İletişim</a>
<button class="burger" aria-label="Menü" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" aria-label="Kapat" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li><li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li><li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li><li><a href="medya.html" class="active">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<!-- ===== MASTHEAD ===== -->
<!-- ===== KARSILAMA ===== -->
<section class="mhero">
<div class="mhero-med">
<img data-kb-m="medya1" data-slot="medya-hero" src="https://picsum.photos/seed/kozamedya/2400/1400" alt="Kozabiat Medya">
</div>
<div class="mhero-in">
<h1>Kozabiat Medya<em>.</em></h1>
</div>
</section>
<div class="mzones">
<section class="mzone" id="haberler">
<div class="mz-head">
<h2 class="mz-h">Haberler. <span class="dim">Basın ve duyurular.</span></h2>
</div>
<div class="mz-wrap">
<div class="mz-rail">
<div class="mz-track">
<article class="mcard" data-art="a0" tabindex="0" role="button" aria-label="Depremzedelere Battaniye Yardımı">
<div class="mc-ph">
<img data-kb-m="medya2" data-slot="feature" src="https://www.kozabiat.com/uploads/genelresim/b_depremzedelere-battaniye-yardimi-874.jpg" alt="Depremzedelere battaniye yardımı">
</div>
<div class="mc-txt">
<span class="mc-tag">Sosyal Sorumluluk</span>
<h3>Depremzedelere Battaniye Yardımı</h3>
</div>
</article>
<article class="mcard" data-art="a1" tabindex="0" role="button" aria-label="Katma değerli ürünle modaya yön verip Türkiye'nin takdirini kazanıyor">
<div class="mc-ph">
<img data-kb-m="medya3" data-slot="n1" src="https://www.kozabiat.com/uploads/genelresim/b_katma-degerli-urunle-modaya-yon-verip-turkiye%C2%B4nin-takdirini-kazaniyor-7881.jpg" alt="Katma değerli üretim">
</div>
<div class="mc-txt">
<span class="mc-tag">Röportaj</span>
<h3>Katma değerli ürünle modaya yön verip Türkiye'nin takdirini kazanıyor</h3>
</div>
</article>
<article class="mcard" data-art="a2" tabindex="0" role="button" aria-label="Başkan Poyraz'ın işyeri ziyaretleri sürüyor">
<div class="mc-ph">
<img data-kb-m="medya4" data-slot="n2" src="https://www.kozabiat.com/uploads/genelresim/b_baskan-poyrazin-isyeri-ziyaretleri-suruyor-8382.jpg" alt="Başkan Poyraz fabrika ziyareti">
</div>
<div class="mc-txt">
<span class="mc-tag">Ziyaret</span>
<h3>Başkan Poyraz'ın işyeri ziyaretleri sürüyor</h3>
</div>
</article>
<article class="mcard" data-art="a3" tabindex="0" role="button" aria-label="Kozabiat özgün ürün tasarımlarıyla dünya modasının merkezine yürüyor">
<div class="mc-ph">
<img data-kb-m="medya5" data-slot="n3" src="https://www.kozabiat.com/uploads/genelresim/b_kozabiat-ozgun-urun-tasarimlariyla-dunya-modasinin-merkezine-yuruyor-1158.jpg" alt="Özgün ürün tasarımları">
</div>
<div class="mc-txt">
<span class="mc-tag">Kurumsal</span>
<h3>Kozabiat özgün ürün tasarımlarıyla dünya modasının merkezine yürüyor</h3>
</div>
</article>
<article class="mcard" data-art="a4" tabindex="0" role="button" aria-label="Kozabiat Tekstil yeni şubesinin açılışını gerçekleştirdi">
<div class="mc-ph">
<img data-kb-m="medya6" data-slot="n4" src="https://www.kozabiat.com/uploads/genelresim/b_kozabiat-tekstil-yeni-subesinin-acilisini-gerceklestirdi-2810.jpg" alt="Yeşildirek şube açılışı">
</div>
<div class="mc-txt">
<span class="mc-tag">Mağaza</span>
<h3>Kozabiat Tekstil yeni şubesinin açılışını gerçekleştirdi</h3>
</div>
</article>
<article class="mcard" data-art="a5" tabindex="0" role="button" aria-label="Bursa'da mağaza açılışında izdiham!">
<div class="mc-ph">
<img data-kb-m="medya7" data-slot="n5" src="https://www.kozabiat.com/uploads/genelresim/b_bursa%C2%B4da-magaza-acilisinda-izdiham%21-4054.jpg" alt="Bursa Domikids mağaza açılışı">
</div>
<div class="mc-txt">
<span class="mc-tag">Mağaza Açılışı</span>
<h3>Bursa'da mağaza açılışında izdiham!</h3>
</div>
</article>
<article class="mcard" data-art="a6" tabindex="0" role="button" aria-label="Bir dizi yeni mağaza açılışıyla Türkiye'deki genişlememiz sürüyor">
<div class="mc-ph">
<img data-kb-m="medya8" data-slot="n6" src="https://www.kozabiat.com/uploads/genelresim/b_kozabiat-bir-dizi-yeni-magaza-acilisiyla-turkiye%C2%B4deki-genislemesine-devam-ediyor-6247.jpg" alt="Zeytinburnu toptan mağaza">
</div>
<div class="mc-txt">
<span class="mc-tag">Mağaza</span>
<h3>Bir dizi yeni mağaza açılışıyla Türkiye'deki genişlememiz sürüyor</h3>
</div>
</article>
</div>
</div>
<button class="mz-ar prev" type="button" aria-label="Geri">
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M15 5 L8 12 L15 19" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="mz-ar next" type="button" aria-label="İleri">
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M9 5 L16 12 L9 19" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</section>
<section class="mzone" id="fuarlar">
<div class="mz-head">
<h2 class="mz-h">Fuarlar. <span class="dim">Katılımlarımıza göz atın.</span></h2>
</div>
<div class="mz-wrap">
<div class="mz-rail">
<div class="mz-track">
<article class="mcard" data-art="f0" tabindex="0" role="button" aria-label="Linexpo İstanbul 2026">
<div class="mc-ph">
<img data-kb-m="medya9" data-slot="f-feature" src="https://picsum.photos/seed/kozafuarana/1200/900" alt="Linexpo İstanbul 2026">
</div>
<div class="mc-txt">
<span class="mc-tag">Yaklaşan Fuar</span>
<h3>Linexpo İstanbul 2026</h3>
</div>
</article>
<article class="mcard" data-art="f1" tabindex="0" role="button" aria-label="Mode City & Interfilière Paris">
<div class="mc-ph">
<img data-kb-m="medya10" data-slot="f1" src="https://picsum.photos/seed/kozaf1/900/620" alt="Mode City & Interfilière Paris">
</div>
<div class="mc-txt">
<span class="mc-tag">Yurt Dışı</span>
<h3>Mode City & Interfilière Paris</h3>
</div>
</article>
<article class="mcard" data-art="f2" tabindex="0" role="button" aria-label="CPM — Collection Première Moscow">
<div class="mc-ph">
<img data-kb-m="medya11" data-slot="f2" src="https://picsum.photos/seed/kozaf2/900/620" alt="CPM — Collection Première Moscow">
</div>
<div class="mc-txt">
<span class="mc-tag">Yurt Dışı</span>
<h3>CPM — Collection Première Moscow</h3>
</div>
</article>
<article class="mcard" data-art="f3" tabindex="0" role="button" aria-label="IFCO — Istanbul Fashion Connection">
<div class="mc-ph">
<img data-kb-m="medya12" data-slot="f3" src="https://picsum.photos/seed/kozaf3/900/620" alt="IFCO — Istanbul Fashion Connection">
</div>
<div class="mc-txt">
<span class="mc-tag">Yurt İçi</span>
<h3>IFCO — Istanbul Fashion Connection</h3>
</div>
</article>
<article class="mcard" data-art="f4" tabindex="0" role="button" aria-label="Salon International de la Lingerie">
<div class="mc-ph">
<img data-kb-m="medya13" data-slot="f4" src="https://picsum.photos/seed/kozaf4/900/620" alt="Salon International de la Lingerie">
</div>
<div class="mc-txt">
<span class="mc-tag">Yurt Dışı</span>
<h3>Salon International de la Lingerie</h3>
</div>
</article>
<article class="mcard" data-art="f5" tabindex="0" role="button" aria-label="Kyiv Fashion">
<div class="mc-ph">
<img data-kb-m="medya14" data-slot="f5" src="https://picsum.photos/seed/kozaf5/900/620" alt="Kyiv Fashion">
</div>
<div class="mc-txt">
<span class="mc-tag">Yurt Dışı</span>
<h3>Kyiv Fashion</h3>
</div>
</article>
<article class="mcard" data-art="f6" tabindex="0" role="button" aria-label="Premium Textile Expo">
<div class="mc-ph">
<img data-kb-m="medya15" data-slot="f6" src="https://picsum.photos/seed/kozaf6/900/620" alt="Premium Textile Expo">
</div>
<div class="mc-txt">
<span class="mc-tag">Yurt İçi</span>
<h3>Premium Textile Expo</h3>
</div>
</article>
</div>
</div>
<button class="mz-ar prev" type="button" aria-label="Geri">
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M15 5 L8 12 L15 19" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="mz-ar next" type="button" aria-label="İleri">
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M9 5 L16 12 L9 19" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</section>
<section class="mzone" id="filmler">
<div class="mz-head">
<h2 class="mz-h">Tanıtım Filmleri. <span class="dim">Kamera arkasına geçin.</span></h2>
</div>
<div class="mz-wrap">
<div class="mz-rail">
<div class="mz-track">
<article class="mcard" data-art="v0" tabindex="0" role="button" aria-label="Discover The Potential — Kozabiat Kurumsal Film">
<div class="mc-ph">
<img data-kb-m="medya16" data-slot="v-feature" src="https://picsum.photos/seed/kozafilmana/1200/900" alt="Discover The Potential — Kozabiat Kurumsal Film">
</div>
<div class="mc-txt">
<span class="mc-tag">Kurumsal Film</span>
<h3>Discover The Potential — Kozabiat Kurumsal Film</h3>
</div>
</article>
<article class="mcard" data-art="v1" tabindex="0" role="button" aria-label="Dominant — Women's Essentials">
<div class="mc-ph">
<img data-kb-m="medya17" data-slot="v1" src="https://picsum.photos/seed/kozav1/900/620" alt="Dominant — Women's Essentials">
</div>
<div class="mc-txt">
<span class="mc-tag">Marka Filmi</span>
<h3>Dominant — Women's Essentials</h3>
</div>
</article>
<article class="mcard" data-art="v2" tabindex="0" role="button" aria-label="Rockhard — Erkek İç Giyim">
<div class="mc-ph">
<img data-kb-m="medya18" data-slot="v2" src="https://picsum.photos/seed/kozav2/900/620" alt="Rockhard — Erkek İç Giyim">
</div>
<div class="mc-txt">
<span class="mc-tag">Marka Filmi</span>
<h3>Rockhard — Erkek İç Giyim</h3>
</div>
</article>
<article class="mcard" data-art="v3" tabindex="0" role="button" aria-label="Domikids — Çocuklar İçin">
<div class="mc-ph">
<img data-kb-m="medya19" data-slot="v3" src="https://picsum.photos/seed/kozav3/900/620" alt="Domikids — Çocuklar İçin">
</div>
<div class="mc-txt">
<span class="mc-tag">Marka Filmi</span>
<h3>Domikids — Çocuklar İçin</h3>
</div>
</article>
<article class="mcard" data-art="v4" tabindex="0" role="button" aria-label="Tezgâhtan Koleksiyona: Üretim Sürecimiz">
<div class="mc-ph">
<img data-kb-m="medya20" data-slot="v4" src="https://picsum.photos/seed/kozav4/900/620" alt="Tezgâhtan Koleksiyona: Üretim Sürecimiz">
</div>
<div class="mc-txt">
<span class="mc-tag">Üretim</span>
<h3>Tezgâhtan Koleksiyona: Üretim Sürecimiz</h3>
</div>
</article>
<article class="mcard" data-art="v5" tabindex="0" role="button" aria-label="Kalite Kontrol ve Sertifikasyon Süreçlerimiz">
<div class="mc-ph">
<img data-kb-m="medya21" data-slot="v5" src="https://picsum.photos/seed/kozav5/900/620" alt="Kalite Kontrol ve Sertifikasyon Süreçlerimiz">
</div>
<div class="mc-txt">
<span class="mc-tag">Üretim</span>
<h3>Kalite Kontrol ve Sertifikasyon Süreçlerimiz</h3>
</div>
</article>
</div>
</div>
<button class="mz-ar prev" type="button" aria-label="Geri">
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M15 5 L8 12 L15 19" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="mz-ar next" type="button" aria-label="İleri">
<svg viewBox="0 0 24 24" width="18" height="18"><path d="M9 5 L16 12 L9 19" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</section>
</div>
<div class="shell">
<section class="news-cta reveal">
<div>
<div class="k">E-Bültene Kaydol</div>
<h2>Yeniliklerden ilk siz haberdar olun.</h2>
<p>Yeni koleksiyonlar, fuar katılımları ve kampanyalarımızı doğrudan e-posta kutunuza gönderelim.</p>
</div>
<div>
<div class="nc-form">
<input id="ncEmail" type="email" placeholder="E-posta adresiniz" aria-label="E-posta adresiniz">
<button id="ncBtn" type="button">Kaydol</button>
</div>
<div class="nc-note" id="ncNote">Dilediğiniz zaman abonelikten çıkabilirsiniz.</div>
</div>
</section>
</div>
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hakkimizda.html">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html">Dominant</a></li>
<li><a href="markalarimiz.html">Rockhard</a></li>
<li><a href="markalarimiz.html">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="medya.html" class="active">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html" class="active">Basın</a></li>
<li><a href="medya.html" class="active">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<!-- ===== MEDYA İÇERİĞİ — metinler ve yeni kayıtlar panelden yönetilir ===== -->
<script id="kb-medya-ic" type="application/json">
{"metin":{},"yeni":[]}
</script>
<script>
(function(){
var el=document.getElementById("kb-medya-ic");
var IC={metin:{},yeni:[]};
try{ IC=JSON.parse(el.textContent)||IC; }catch(e){}
IC.metin=IC.metin||{}; IC.yeni=IC.yeni||[]; IC.gizli=IC.gizli||[];
window.KB_IC=IC;
/* 0) panelden kaldirilan hazir kartlar sitede hic gorunmez */
IC.gizli.forEach(function(id){
[].forEach.call(document.querySelectorAll(".mcard[data-art=\""+id+"\"]"),function(k){ k.remove(); });
});
function esc(s){return String(s==null?"":s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");}
function escA(s){return esc(s).replace(/"/g,""");}
/* 1) panelden eklenen yeni kayitlar */
IC.yeni.forEach(function(it){
if(!it||!it.id||!it.bolum) return;
var ray=document.querySelector("#"+it.bolum+" .mz-track");
if(!ray) return;
var medya=it.video
? "<video src=\""+escA(it.kapak)+"\" autoplay muted loop playsinline preload=\"auto\"></video>"
: (it.kapak?"<img loading=\"lazy\" src=\""+escA(it.kapak)+"\" alt=\""+escA(it.baslik)+"\">":"");
var k=document.createElement("article");
k.className="mcard";
k.setAttribute("data-art",it.id);
k.setAttribute("tabindex","0");
k.setAttribute("role","button");
k.setAttribute("aria-label",it.baslik||"");
k.innerHTML="<div class=\"mc-ph\">"+medya+"</div>"+
"<div class=\"mc-txt\">"+(it.tag?"<span class=\"mc-tag\">"+esc(it.tag)+"</span>":"")+
"<h3>"+esc(it.baslik)+"</h3></div>";
if(it.basa&&ray.firstChild) ray.insertBefore(k,ray.firstChild); else ray.appendChild(k);
});
/* 2) mevcut kartlarin metinleri */
Object.keys(IC.metin).forEach(function(id){
var d=IC.metin[id]||{};
var k=document.querySelector(".mcard[data-art=\""+id+"\"]");
if(!k) return;
if(d.baslik!=null&&d.baslik!==""){
var h3=k.querySelector("h3"); if(h3) h3.textContent=d.baslik;
k.setAttribute("aria-label",d.baslik);
}
if(d.tag!=null){
var tg=k.querySelector(".mc-tag");
if(tg){ if(d.tag) tg.textContent=d.tag; else tg.remove(); }
else if(d.tag){
var sp=document.createElement("span"); sp.className="mc-tag"; sp.textContent=d.tag;
var kutu=k.querySelector(".mc-txt"); if(kutu) kutu.insertBefore(sp,kutu.firstChild);
}
}
});
})();
</script>
<script>
(function(){
const R=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
/* sticky header */
const H=document.getElementById('hdr');
const onScroll=()=>H.classList.toggle('scrolled',window.scrollY>40);
window.addEventListener('scroll',onScroll,{passive:true});onScroll();
/* reveal */
if(!R){
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12,rootMargin:'0px 0px -6% 0px'});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}else{
document.querySelectorAll('.reveal').forEach(el=>el.classList.add('in'));
}
/* ===== bolum slider'lari: kendiliginden soldan saga akar ===== */
var yavas = window.matchMedia('(prefers-reduced-motion:reduce)').matches;
document.querySelectorAll('.mzone').forEach(function(z){
var rail=z.querySelector('.mz-rail');
var track=z.querySelector('.mz-track');
var geri=z.querySelector('.mz-ar.prev');
var ileri=z.querySelector('.mz-ar.next');
if(!rail||!track) return;
/* kesintisiz dongu icin kart dizisini bir kez daha ekle */
var kopya=track.innerHTML;
track.insertAdjacentHTML('beforeend',kopya);
track.querySelectorAll('.mcard').forEach(function(k,i){
if(i>=track.children.length/2){ k.setAttribute('aria-hidden','true'); k.setAttribute('tabindex','-1'); }
});
var yariUzunluk=0;
function olc(){ yariUzunluk=track.scrollWidth/2; }
olc();
window.addEventListener('resize',olc);
window.addEventListener('load',olc);
function sar(){
if(!yariUzunluk) return;
if(rail.scrollLeft>=yariUzunluk) rail.scrollLeft-=yariUzunluk;
}
var duraklat=false, zaman=null;
function beklet(ms){
duraklat=true;
clearTimeout(zaman);
zaman=setTimeout(function(){ duraklat=false; },ms||2200);
}
rail.addEventListener('mouseenter',function(){ duraklat=true; clearTimeout(zaman); });
rail.addEventListener('mouseleave',function(){ duraklat=false; });
rail.addEventListener('pointerdown',function(){ beklet(3000); });
rail.addEventListener('wheel',function(){ beklet(3000); },{passive:true});
rail.addEventListener('touchstart',function(){ beklet(3000); },{passive:true});
rail.addEventListener('scroll',sar,{passive:true});
function adim(){
var k=track.querySelector('.mcard');
if(!k) return rail.clientWidth*0.8;
var g=parseFloat(getComputedStyle(track).columnGap||getComputedStyle(track).gap||'18');
return k.getBoundingClientRect().width+g;
}
if(geri) geri.addEventListener('click',function(){ beklet(4000); rail.scrollBy({left:-adim(),behavior:'smooth'}); });
if(ileri) ileri.addEventListener('click',function(){ beklet(4000); rail.scrollBy({left: adim(),behavior:'smooth'}); });
if(yavas) return; /* hareket azaltma tercihi acikken akitma */
var HIZ=0.42; /* kare basina piksel — yaklasik 25px/sn */
var artik=0;
function tik(){
if(!duraklat && !document.hidden && !document.body.classList.contains('rd-open') && rail.clientWidth){
artik+=HIZ;
var tam=Math.floor(artik);
if(tam){ rail.scrollLeft+=tam; artik-=tam; }
}
requestAnimationFrame(tik);
}
requestAnimationFrame(tik);
});
/* kart klavyeyle de acilsin */
document.addEventListener('keydown',function(e){
if(e.key!=='Enter'&&e.key!==' ') return;
var k=document.activeElement;
if(!k||!k.classList||!k.classList.contains('mcard')) return;
e.preventDefault();
k.click();
});
/* newsletter (demo) */
const btn=document.getElementById('ncBtn'),email=document.getElementById('ncEmail'),note=document.getElementById('ncNote');
btn.addEventListener('click',()=>{
const v=(email.value||'').trim();
if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)){note.textContent='Lütfen geçerli bir e-posta adresi girin.';note.style.color='#74C9E3';return;}
note.textContent='Teşekkürler — kaydınız alındı.';note.style.color='#74C9E3';email.value='';email.disabled=true;btn.disabled=true;btn.textContent='Kaydedildi';
});
})();
</script>
<!-- ===== MEDYA OKUYUCU (site icinde acilir) ===== -->
<div class="rd-store" hidden>
<div class="rd-src" data-art="a0" data-ust="Sosyal Sorumluluk · Kahramanmaraş, Şanlıurfa, Adana" data-baslik="Depremzedelere Battaniye Yardımı">
<div class="rd-text">
<p>Geçtiğimiz Şubat ayında Kahramanmaraş, Şanlıurfa ve Adana'yı vuran depremin ardından, acil olarak dışarıda kalan yüzlerce insan için umut dolu bir yardım hareketi başladı. Herkesin sıcaklığını hissedeceği, birlik ve dayanışmanın sembolü olacak olan bu yardım, battaniyelerin üretiminden başlayarak, gönüllülerin kararlılığı ve emeğiyle gerçekleşti.</p>
<p>Kırsal bölgelerde evlerini terk etmek zorunda kalan insanlar için, soğuk gecelerde sıcaklık ve koruma sağlamak adına battaniyelerin üretimi büyük bir hızla başladı. Üretim hatları, mesai mefhumu gözetmeksizin 24 saat boyunca çalıştı. Gönüllüler, gece gündüz demeden, her biri bir umut ışığı olan 2000'den fazla battaniyeyi üretmek için yoğun çaba sarf etti.</p>
<p>Üretilen battaniyeler, özenle paketlenip poşetlendi, çuvallandı ve kamyonlarla deprem bölgesine ulaştırılmak üzere hazırlandı. Bu süreçte, her bir battaniye sadece bir ısı kaynağı değil, aynı zamanda bir dayanışma ve umut sembolüydü. Yardımseverlerin yürekleriyle işledikleri bu battaniyeler, depremzedelerin yalnız olmadıklarını ve toplumun bir parçası olduklarını hissettirdi.</p>
<p>Depremin yaralarını sarmak için ortaya konan bu yardım hareketi, sadece battaniyelerin fiziksel sıcaklığını değil, aynı zamanda insanlık ve dayanışmanın sıcaklığını da hissettirdi. Bir kez daha gösterildi ki, zor zamanlarda bir araya gelmek ve birbirimize destek olmak, en güçlü temel değerlerimizden biridir. Bu battaniyeler, sadece ısınmayı sağlamakla kalmadı, aynı zamanda kalpleri ısıttı ve umudu yeşertti.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya22" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_depremzedelere-battaniye-yardimi_95620.jpg" alt="Depremzedelere Battaniye Yardımı — fotoğraf 1">
<img data-kb-m="medya23" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_depremzedelere-battaniye-yardimi_59751.jpg" alt="Depremzedelere Battaniye Yardımı — fotoğraf 2">
<img data-kb-m="medya24" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_depremzedelere-battaniye-yardimi_90040.jpg" alt="Depremzedelere Battaniye Yardımı — fotoğraf 3">
<img data-kb-m="medya25" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_depremzedelere-battaniye-yardimi_59752.jpg" alt="Depremzedelere Battaniye Yardımı — fotoğraf 4">
</div>
</div>
<div class="rd-src" data-art="a1" data-ust="Röportaj · Hilmi Ekmekcioğlu" data-baslik="Katma değerli ürünle modaya yön verip Türkiye'nin takdirini kazanıyor">
<div class="rd-text">
<p>Şirket sahibi Hilmi Ekmekcioğlu, “Ürün yelpazemiz oldukça geniş. Çocuk-bayan ve erkek pijama, iç giyim olarak akla gelen ne varsa ürün gamımız içerisinde bulunuyor.” diyor. Saten malzemeden çoraba kadar tüm ürünlerin mevcut olduğunu, yalnızca bir iki kalem ürünü dış kaynaklardan tedarik ettiklerini belirtiyor.</p>
<p>Uluslararası pazarda Rusya, Ukrayna, Bosna Hersek ve Sırbistan gibi ülkelerde iyi satış yaptıklarını ve 17 ülkede marka patentine sahip olduklarını söyleyen Ekmekcioğlu, iç piyasada da Türkiye'nin önde gelen firmaları ile çalışmalarını sürdürdüklerini aktarıyor.</p>
<p>“İnsana dayalı bir iş yapıyoruz” diyen Ekmekcioğlu, katma değer yaratan ürünler üretmeye odaklandıklarını vurguluyor. Şirketin hedefleri arasında Avrupa pazarına daha fazla ihracat yapmak ve uluslararası ticarette daha ileri konumlara gelmek yer alıyor.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya26" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_katma-degerli-urunle-modaya-yon-verip-turkiye%C2%B4nin-takdirini-kazaniyor_77100.jpg" alt="Katma değerli ürünle modaya yön verip Türkiye'nin takdirini kazanıyor — fotoğraf 1">
</div>
</div>
<div class="rd-src" data-art="a2" data-ust="Ziyaret · Çekmeköy, İstanbul" data-baslik="Başkan Poyraz'ın işyeri ziyaretleri sürüyor">
<div class="rd-text">
<p>Çekmeköy Belediye Başkanı Ahmet Poyraz, Çekmeköy'de faaliyet gösteren işyerlerini ziyaret ederek işverenler ve çalışanlar ile sohbet ediyor. Bu kapsamda Kozabiat Tekstil firmasını ziyaret eden Başkan Poyraz'a AK Parti Çekmeköy İlçe Başkanı Salih Kırıcı eşlik etti.</p>
<p>Fabrika faaliyetleri ve çalışmaları hakkında işverenlerden bilgi alan Başkan Poyraz, çalışanlarla tezgâhları başında sohbet etti. Çekmeköy'ün ekonomisine katkıda bulunan işyerlerini ziyaret ederek işveren ve işçilere destek olan Başkan Poyraz, ilçeye değer katacak işlere her zaman destek olacaklarını belirtti.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya27" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_baskan-poyrazin-isyeri-ziyaretleri-suruyor_21760.jpg" alt="Başkan Poyraz'ın işyeri ziyaretleri sürüyor — fotoğraf 1">
</div>
</div>
<div class="rd-src" data-art="a3" data-ust="Kurumsal · Discover The Potential" data-baslik="Kozabiat özgün ürün tasarımlarıyla dünya modasının merkezine yürüyor">
<div class="rd-text">
<p>1996 yılında kurulan, Türkiye'nin lider iç çamaşırı ve pijama üreticisi olma yolunda ilerleyen Kozabiat Tekstil, yurt içi pazarda varlık gösterirken “Discover The Potential” sloganı ile Türkiye'deki üretim potansiyelini Ortadoğu, Asya ve Avrupa'da temsil etmektedir.</p>
<p>Kozabiat Tekstil, İstanbul ve Niğde fabrikaları olmak üzere toplamda 18.000 m² alanda ayda 2.000.000'dan fazla adet ile üretim yapmakta ve 500 kişilik ekibiyle kendi koleksiyonlarını tasarlayıp üretmektedir.</p>
<p>Her yeni sezonun trendlerine göre yapılan tasarımların yanı sıra Kozabiat; SEDEX, EAC, ISO, UKR-SEPRO, BSCI gibi dünya çapında kabul gören sertifikalara sahiptir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya28" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_kozabiat-ozgun-urun-tasarimlariyla-dunya-modasinin-merkezine-yuruyor_59550.jpg" alt="Kozabiat özgün ürün tasarımlarıyla dünya modasının merkezine yürüyor — fotoğraf 1">
</div>
</div>
<div class="rd-src" data-art="a4" data-ust="Mağaza · Yeşildirek, İstanbul" data-baslik="Kozabiat Tekstil yeni şubesinin açılışını gerçekleştirdi">
<div class="rd-text">
<p>Kozabiat Tekstil İç Giyim Toptan, İstanbul'un Yeşildirek semtinde yer alan bir iç giyim toptancısıdır. 1996 yılından beri faaliyet gösteren firma, kaliteli ve şık iç giyim ürünleri ile müşterilerine hizmet vermektedir.</p>
<p>Kozabiat Tekstil İç Giyim Toptan'ın ürün yelpazesi oldukça geniş bir çeşitlilik göstermektedir. Kadın, erkek ve çocuklara yönelik birçok farklı iç giyim ürünü mevcuttur. Pijama takımları, atletler, külotlar, sütyenler, satenler, çoraplar, boxerlar gibi birçok farklı ürün seçeneği bulunmaktadır.</p>
<p>Müşteri memnuniyetini ön planda tutan Kozabiat Tekstil İç Giyim Toptan, müşterilerine kaliteli ürünler sunarken aynı zamanda uygun fiyat politikası ile de öne çıkmaktadır. Ayrıca mağaza satış platformu da bulunmaktadır ve müşterilerine kolay ve hızlı bir alışveriş deneyimi sunmaktadır.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya29" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_kozabiat-tekstil-yeni-subesinin-acilisini-gerceklestirdi_51320.jpg" alt="Kozabiat Tekstil yeni şubesinin açılışını gerçekleştirdi — fotoğraf 1">
</div>
</div>
<div class="rd-src" data-art="a5" data-ust="Mağaza Açılışı · Bursa" data-baslik="Bursa'da mağaza açılışında izdiham!">
<div class="rd-text">
<p>Domikids, çocukların konforunu ve sağlığını ön planda tutarak tasarladığı iç giyim ürünleriyle öne çıkıyor. Mağaza açılışıyla birlikte çocukların ihtiyaç duyduğu kaliteli ve sağlıklı iç giyim ürünlerine daha kolay erişim sağlanacak.</p>
<p>Domikids'in ürün yelpazesi arasında pijama takımları, termal içlikler, boxer külotlar, taytlar, atletler ve çoraplar gibi çocukların günlük yaşamlarında ihtiyaç duydukları her türlü iç giyim ürünü yer alıyor.</p>
<p>Ayrıca Domikids, tasarımlarında da çocukların seveceği renkler, desenler ve karakterler kullanarak onların kişisel tercihlerine de hitap ediyor. Böylece hem sağlıklı hem de eğlenceli bir iç giyim deneyimi sunuyor.</p>
<p>Domikids mağaza açılışında müşterilere özel indirimler ve hediyeler de sunulacak. Tüm çocukları Domikids mağazalarına bekliyoruz.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya30" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_bursa%C2%B4da-magaza-acilisinda-izdiham%21_24020.jpg" alt="Bursa'da mağaza açılışında izdiham! — fotoğraf 1">
</div>
</div>
<div class="rd-src" data-art="a6" data-ust="Mağaza · Zeytinburnu, İstanbul" data-baslik="Bir dizi yeni mağaza açılışıyla Türkiye'deki genişlememiz sürüyor">
<div class="rd-text">
<p>Kozabiat Tekstil, Türkiye'deki ilk çıkışından bu yana tekstil sektöründe önemli bir konuma gelmiştir. 2016 yılında İstanbul Zeytinburnu'nda bir toptan mağazası açarak Türkiye pazarındaki taahhüdünü daha da güçlendirmiştir. Mağazasıyla müşterilerine daha iyi hizmet verebilen firma, ürün yelpazesini genişletmiş ve müşteri memnuniyetini daha da önemseyen bir hâle gelmiştir.</p>
<p>Kozabiat Tekstil'in toptan mağazası; iç giyim, pijama, saten, sütyen, çorap ve çocuk giyim gibi farklı kategorilerde ürünler sunmaktadır. Mağaza, müşterilerine kaliteli ürünler sunarken aynı zamanda uygun fiyatlarla da hizmet vermektedir.</p>
<p>Firma, toptan mağazasında müşteri memnuniyetini ön planda tutarak müşteri taleplerini ve beklentilerini karşılamak için farklı ürün çeşitleri sunmaktadır. Ayrıca müşterilere hızlı ve güvenilir bir şekilde ürün teslimatı yapmaktadır.</p>
<p>Kozabiat Tekstil, Türkiye pazarındaki taahhüdünü güçlendirmeye devam ederek müşteri memnuniyetini artırmak ve ürün yelpazesini genişletmek için çalışmalarına devam etmektedir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya31" loading="lazy" src="https://www.kozabiat.com/uploads/genelresim/b_kozabiat_-bir-dizi-yeni-magaza-acilisiyla-turkiye%C2%B4deki-genislemesine-devam-ediyor_19530.jpg" alt="Bir dizi yeni mağaza açılışıyla Türkiye'deki genişlememiz sürüyor — fotoğraf 1">
</div>
</div>
<div class="rd-src" data-art="f0" data-ust="12 – 14 Mart 2026 · İstanbul Fuar Merkezi · Hol 9, Stand A24" data-baslik="Linexpo İstanbul 2026">
<div class="rd-text">
<p>Bu alanı fuar hakkındaki giriş metniyle doldurabilirsiniz. Fuarın kapsamı, katılımcı profili ve Kozabiat olarak neden yer aldığınız gibi bilgiler burada yer alabilir.</p>
<p>İkinci paragrafta standınızda sergileyeceğiniz koleksiyonlardan, öne çıkan ürün gruplarından ve varsa lansmanı yapılacak yeniliklerden bahsedebilirsiniz.</p>
<p>Son paragrafta ziyaretçilere yönelik çağrı yapabilirsiniz: randevu talebi, stand konumu, iletişim bilgileri gibi.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya32" loading="lazy" src="https://picsum.photos/seed/kozaf-featureg1/1000/750" alt="Linexpo İstanbul 2026 — fotoğraf 1">
<img data-kb-m="medya33" loading="lazy" src="https://picsum.photos/seed/kozaf-featureg2/1000/750" alt="Linexpo İstanbul 2026 — fotoğraf 2">
<img data-kb-m="medya34" loading="lazy" src="https://picsum.photos/seed/kozaf-featureg3/1000/750" alt="Linexpo İstanbul 2026 — fotoğraf 3">
<img data-kb-m="medya35" loading="lazy" src="https://picsum.photos/seed/kozaf-featureg4/1000/750" alt="Linexpo İstanbul 2026 — fotoğraf 4">
</div>
</div>
<div class="rd-src" data-art="f1" data-ust="Temmuz 2025 · Paris, Fransa" data-baslik="Mode City & Interfilière Paris">
<div class="rd-text">
<p>Fuar detaylarını buraya yazabilirsiniz.</p>
<p>Görüşülen alıcılar, açılan yeni pazarlar ve fuar izlenimleri bu bölümde anlatılabilir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya36" loading="lazy" src="https://picsum.photos/seed/kozaf1g1/1000/750" alt="Mode City & Interfilière Paris — fotoğraf 1">
<img data-kb-m="medya37" loading="lazy" src="https://picsum.photos/seed/kozaf1g2/1000/750" alt="Mode City & Interfilière Paris — fotoğraf 2">
</div>
</div>
<div class="rd-src" data-art="f2" data-ust="Şubat 2025 · Moskova, Rusya" data-baslik="CPM — Collection Première Moscow">
<div class="rd-text">
<p>Fuar detaylarını buraya yazabilirsiniz.</p>
<p>Bölge pazarına dair değerlendirmeler ve iş birliği görüşmeleri bu bölümde anlatılabilir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya38" loading="lazy" src="https://picsum.photos/seed/kozaf2g1/1000/750" alt="CPM — Collection Première Moscow — fotoğraf 1">
<img data-kb-m="medya39" loading="lazy" src="https://picsum.photos/seed/kozaf2g2/1000/750" alt="CPM — Collection Première Moscow — fotoğraf 2">
</div>
</div>
<div class="rd-src" data-art="f3" data-ust="Şubat 2025 · İstanbul Fuar Merkezi" data-baslik="IFCO — Istanbul Fashion Connection">
<div class="rd-text">
<p>Fuar detaylarını buraya yazabilirsiniz.</p>
<p>Stand tasarımı, ziyaretçi yoğunluğu ve öne çıkan ürünler bu bölümde anlatılabilir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya40" loading="lazy" src="https://picsum.photos/seed/kozaf3g1/1000/750" alt="IFCO — Istanbul Fashion Connection — fotoğraf 1">
<img data-kb-m="medya41" loading="lazy" src="https://picsum.photos/seed/kozaf3g2/1000/750" alt="IFCO — Istanbul Fashion Connection — fotoğraf 2">
</div>
</div>
<div class="rd-src" data-art="f4" data-ust="Ocak 2025 · Paris, Fransa" data-baslik="Salon International de la Lingerie">
<div class="rd-text">
<p>Fuar detaylarını buraya yazabilirsiniz.</p>
<p>Avrupa pazarına dair hedefler ve fuar çıktıları bu bölümde anlatılabilir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya42" loading="lazy" src="https://picsum.photos/seed/kozaf4g1/1000/750" alt="Salon International de la Lingerie — fotoğraf 1">
<img data-kb-m="medya43" loading="lazy" src="https://picsum.photos/seed/kozaf4g2/1000/750" alt="Salon International de la Lingerie — fotoğraf 2">
</div>
</div>
<div class="rd-src" data-art="f5" data-ust="Eylül 2024 · Kiev, Ukrayna" data-baslik="Kyiv Fashion">
<div class="rd-text">
<p>Fuar detaylarını buraya yazabilirsiniz.</p>
<p>Bölgedeki bayi ağı ve UKR-SEPRO sertifikasyonuna dair bilgiler burada yer alabilir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya44" loading="lazy" src="https://picsum.photos/seed/kozaf5g1/1000/750" alt="Kyiv Fashion — fotoğraf 1">
<img data-kb-m="medya45" loading="lazy" src="https://picsum.photos/seed/kozaf5g2/1000/750" alt="Kyiv Fashion — fotoğraf 2">
</div>
</div>
<div class="rd-src" data-art="f6" data-ust="Kasım 2024 · İstanbul" data-baslik="Premium Textile Expo">
<div class="rd-text">
<p>Fuar detaylarını buraya yazabilirsiniz.</p>
<p>Tedarik süreçleri ve sürdürülebilirlik başlıkları bu bölümde anlatılabilir.</p>
</div>
<div class="rd-gal">
<img data-kb-m="medya46" loading="lazy" src="https://picsum.photos/seed/kozaf6g1/1000/750" alt="Premium Textile Expo — fotoğraf 1">
<img data-kb-m="medya47" loading="lazy" src="https://picsum.photos/seed/kozaf6g2/1000/750" alt="Premium Textile Expo — fotoğraf 2">
</div>
</div>
<div class="rd-src" data-art="v0" data-ust="Kurumsal Tanıtım · 2026" data-baslik="Discover The Potential — Kozabiat Kurumsal Film">
<div class="rd-text">
<p>Filmin konusunu ve prodüksiyon notlarını bu alana yazabilirsiniz.</p>
<p>Medya panelinden bu alana video yükleyebilirsiniz; yüklediğiniz video burada oynatıcı olarak görünür.</p>
</div>
<div class="rd-gal"></div>
</div>
<div class="rd-src" data-art="v1" data-ust="Dominant · Kadın Koleksiyonu" data-baslik="Dominant — Women's Essentials">
<div class="rd-text">
<p>Film açıklamasını buraya yazabilirsiniz.</p>
</div>
<div class="rd-gal"></div>
</div>
<div class="rd-src" data-art="v2" data-ust="Rockhard · Erkek Koleksiyonu" data-baslik="Rockhard — Erkek İç Giyim">
<div class="rd-text">
<p>Film açıklamasını buraya yazabilirsiniz.</p>
</div>
<div class="rd-gal"></div>
</div>
<div class="rd-src" data-art="v3" data-ust="Domikids · Çocuk Koleksiyonu" data-baslik="Domikids — Çocuklar İçin">
<div class="rd-text">
<p>Film açıklamasını buraya yazabilirsiniz.</p>
</div>
<div class="rd-gal"></div>
</div>
<div class="rd-src" data-art="v4" data-ust="Üretim Süreci · İstanbul & Niğde" data-baslik="Tezgâhtan Koleksiyona: Üretim Sürecimiz">
<div class="rd-text">
<p>Üretim sürecine dair anlatımı buraya yazabilirsiniz.</p>
</div>
<div class="rd-gal"></div>
</div>
<div class="rd-src" data-art="v5" data-ust="Kalite & Sertifikasyon" data-baslik="Kalite Kontrol ve Sertifikasyon Süreçlerimiz">
<div class="rd-text">
<p>Kalite süreçlerine dair anlatımı buraya yazabilirsiniz.</p>
</div>
<div class="rd-gal"></div>
</div>
</div>
<div class="reader" id="reader" aria-hidden="true" role="dialog" aria-modal="true">
<div class="rd-top">
<button class="rd-back" id="rdBack" type="button">← Medyaya dön</button>
</div>
<div class="rd-scroll" id="rdScroll">
<article class="rd-art">
<div class="rd-kicker" id="rdKicker"></div>
<h1 id="rdTitle"></h1>
<figure class="rd-fig"><img id="rdImg" alt=""></figure>
<div class="rd-body" id="rdBody"></div>
</article>
<section class="rd-more" id="rdMore">
<div class="rd-more-head"><span class="rd-more-tag">İlgili İçerikler</span></div>
<div class="rd-more-grid" id="rdMoreGrid"></div>
</section>
</div>
</div>
<style>
.reader{position:fixed;inset:0;z-index:120;background:var(--bg);display:none;flex-direction:column}
.reader.on{display:flex}
.rd-top{flex-shrink:0;border-bottom:1px solid var(--line);background:rgba(252,253,253,.92);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
padding:0 clamp(20px,5vw,64px);height:70px;display:flex;align-items:center}
.rd-back{background:none;border:0;cursor:pointer;color:var(--ink);font-family:inherit;
font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:10px 0;transition:color .25s}
.rd-back:hover{color:var(--teal)}
.rd-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.rd-art{max-width:760px;margin:0 auto;padding:clamp(40px,7vh,80px) clamp(20px,5vw,32px) 0}
.rd-kicker{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:20px}
.rd-art h1{font-family:var(--serif,Georgia,serif);font-weight:500;
font-size:clamp(30px,4.4vw,54px);line-height:1.12;letter-spacing:-.015em;color:var(--ink)}
.rd-fig{margin:clamp(28px,4vh,44px) 0}
.rd-fig img{width:100%;height:auto;border-radius:14px;display:block;background:#0d1416}
.rd-body .rd-text p{font-size:clamp(15px,1.15vw,17px);line-height:1.85;color:#3C4749;margin-bottom:1.35em}
.rd-body .rd-text p:first-child{font-size:clamp(17px,1.35vw,20px);line-height:1.7;color:var(--ink)}
/* ---- detay galerisi ---- */
.rd-body .rd-gal{display:grid;gap:14px;margin-top:clamp(28px,4vh,44px);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rd-body .rd-gal:empty{display:none}
.rd-body .rd-gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
display:block;background:#e9eded;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rd-body .rd-gal img:hover{transform:scale(1.02)}
/* tek fotograf varsa tam genislik ve dogal oran */
.rd-body .rd-gal img:only-child{aspect-ratio:auto;height:auto}
/* ---- diger haberler ---- */
.rd-more{max-width:1180px;margin:clamp(56px,8vh,96px) auto 0;
padding:clamp(40px,6vh,64px) clamp(20px,5vw,32px) clamp(70px,10vh,110px);border-top:1px solid var(--line)}
.rd-more-head{margin-bottom:clamp(24px,3vh,36px)}
.rd-more-tag{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:700;
letter-spacing:.32em;text-transform:uppercase;color:var(--ink)}
.rd-more-tag::before{content:"";width:32px;height:2px;background:var(--teal)}
.rd-more-grid{display:grid;gap:clamp(18px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rd-nx{cursor:pointer;background:none;border:0;padding:0;text-align:left;font-family:inherit;
display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
border:1px solid var(--line);background:#fff;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .35s}
.rd-nx:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,14,14,.10);border-color:transparent}
.rd-nx-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d1416}
.rd-nx-ph img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rd-nx:hover .rd-nx-ph img{transform:scale(1.06)}
.rd-nx-cat{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:var(--ink);
font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:6px 11px;border-radius:6px}
.rd-nx-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.rd-nx-ust{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.rd-nx-t{font-family:var(--serif,Georgia,serif);font-size:19px;line-height:1.32;font-weight:500;color:var(--ink);
transition:color .3s}
.rd-nx:hover .rd-nx-t{color:var(--teal)}
.rd-nx-go{margin-top:auto;padding-top:10px;font-size:10px;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:8px}
.rd-nx-go span{transition:transform .3s}
.rd-nx:hover .rd-nx-go span{transform:translateX(5px)}
.feature[data-art],.card[data-art]{cursor:pointer}
@media(max-width:640px){.rd-more-grid{grid-template-columns:1fr}}
</style>
<script>
/* panelden gelen detay metinleri ve yeni kayitlarin detay bloklari */
(function(){
var IC=window.KB_IC||{metin:{},yeni:[]};
var depo=document.querySelector(".rd-store");
(IC.gizli||[]).forEach(function(id){
[].forEach.call(document.querySelectorAll(".rd-src[data-art=\""+id+"\"]"),function(el){ el.remove(); });
});
function esc(s){return String(s==null?"":s).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");}
function escA(s){return esc(s).replace(/"/g,""");}
function pler(a){
return (a||[]).filter(function(x){return String(x||"").trim();})
.map(function(x){return "<p>"+esc(x)+"</p>";}).join("");
}
if(depo)(IC.yeni||[]).forEach(function(it){
if(!it||!it.id) return;
var d=document.createElement("div");
d.className="rd-src";
d.setAttribute("data-art",it.id);
d.setAttribute("data-ust",it.ust||"");
d.setAttribute("data-baslik",it.baslik||"");
var g=(it.galeri||[]).filter(function(x){return x&&x.src;})
.map(function(x){return "<img loading=\"lazy\" src=\""+escA(x.src)+"\" alt=\""+escA(x.alt||it.baslik)+"\">";}).join("");
d.innerHTML="<div class=\"rd-text\">"+pler(it.metin)+"</div>"+(g?"<div class=\"rd-gal\">"+g+"</div>":"");
depo.appendChild(d);
});
Object.keys(IC.metin||{}).forEach(function(id){
var d=IC.metin[id]||{};
var el=document.querySelector(".rd-src[data-art=\""+id+"\"]");
if(!el) return;
if(d.ust!=null) el.setAttribute("data-ust",d.ust);
if(d.baslik!=null&&d.baslik!=="") el.setAttribute("data-baslik",d.baslik);
if(d.metin&&d.metin.length){
var t=el.querySelector(".rd-text");
if(t) t.innerHTML=pler(d.metin);
}
});
})();
</script>
<script>
(function(){
var reader=document.getElementById('reader');
if(!reader) return;
var scroll=document.getElementById('rdScroll');
var grid=document.getElementById('rdMoreGrid');
var sira=[], store={};
[].forEach.call(document.querySelectorAll('.rd-src'),function(el){
var id=el.getAttribute('data-art');
sira.push(id);
store[id]={ust:el.getAttribute('data-ust'),baslik:el.getAttribute('data-baslik'),html:el.innerHTML};
});
/* kart medyasini kaynak kabul et -> medya panelinden degistirilince burasi da degisir */
function kartMedya(id){
return document.querySelector('[data-art="'+id+'"] .mc-ph img, [data-art="'+id+'"] .mc-ph video');
}
function kartGorsel(id){
var el=kartMedya(id);
return el?(el.currentSrc||el.src||''):'';
}
function kartKategori(id){
var c=document.querySelector('[data-art="'+id+'"] .mc-tag');
return c?c.textContent.trim():'';
}
/* ayni bolumdeki (haber / fuar / film) diger icerikler */
function bolumu(id){
var el=document.querySelector('[data-art="'+id+'"]');
var sec=el?el.closest('.mzone'):null;
return sec?sec.id:'';
}
function digerler(id){
var b=bolumu(id);
var ayni=sira.filter(function(x){ return bolumu(x)===b; });
var i=ayni.indexOf(id), out=[];
for(var k=1;k<ayni.length&&out.length<3;k++) out.push(ayni[(i+k)%ayni.length]);
return out;
}
function moreCiz(id){
grid.innerHTML='';
digerler(id).forEach(function(oid){
var d=store[oid];
var b=document.createElement('button');
b.className='rd-nx'; b.type='button'; b.setAttribute('data-go',oid);
var src=kartGorsel(oid), kat=kartKategori(oid);
b.innerHTML=
'<div class="rd-nx-ph">'+(src?'<img src="'+src+'" alt="">':'')+
(kat?'<span class="rd-nx-cat">'+kat+'</span>':'')+'</div>'+
'<div class="rd-nx-b">'+
'<div class="rd-nx-ust">'+d.ust+'</div>'+
'<div class="rd-nx-t">'+d.baslik+'</div>'+
'<div class="rd-nx-go">Haberi oku <span>→</span></div>'+
'</div>';
b.addEventListener('click',function(e){ e.preventDefault(); e.stopPropagation(); ac(oid); });
grid.appendChild(b);
});
}
function ac(id){
var d=store[id]; if(!d) return;
document.getElementById('rdKicker').textContent=d.ust;
document.getElementById('rdTitle').textContent=d.baslik;
document.getElementById('rdBody').innerHTML=d.html;
/* Kart medyasi video ise detayda kontrollu oynatici goster. */
var fig=document.querySelector('.rd-fig');
var el=kartMedya(id), src=kartGorsel(id);
var eskiV=fig.querySelector('video'); if(eskiV){ try{eskiV.pause();}catch(e){} eskiV.remove(); }
var im=document.getElementById('rdImg');
if(el&&el.tagName==='VIDEO'&&src){
im.style.display='none';
var v=document.createElement('video');
v.src=src; v.controls=true; v.playsInline=true; v.preload='metadata';
v.setAttribute('controlsList','nodownload');
fig.appendChild(v);
}else if(src){
im.src=src; im.alt=d.baslik; im.style.display='';
}else{
im.removeAttribute('src'); im.style.display='none';
}
moreCiz(id);
reader.classList.add('on');
reader.setAttribute('aria-hidden','false');
document.documentElement.style.overflow='hidden';
document.body.classList.add('rd-open'); /* arkadaki şerit aksın diye durdur */
scroll.scrollTop=0;
}
function kapat(){
var v=document.querySelector('.rd-fig video'); if(v){ try{v.pause();}catch(e){} }
reader.classList.remove('on');
reader.setAttribute('aria-hidden','true');
document.documentElement.style.overflow='';
document.body.classList.remove('rd-open');
}
document.addEventListener('click',function(e){
var t=e.target;
if(!t||!t.closest) return;
if(t.closest('#rdBack')){ e.preventDefault(); kapat(); return; }
if(t.closest('.rd-nx')) return; /* kendi dinleyicisi var */
if(reader.classList.contains('on')) return;
var host=t.closest('[data-art]');
if(!host) return;
var a=t.closest('a');
if(a&&!a.classList.contains('readmore')) return;
e.preventDefault(); e.stopPropagation();
ac(host.getAttribute('data-art'));
},true);
document.addEventListener('keydown',function(e){
if(e.key==='Escape'&&reader.classList.contains('on')) kapat();
});
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İletişim — Kozabiat Tekstil</title>
<meta name="description" content="Kozabiat Tekstil ile iletişime geçin. Çekmeköy merkez ofis, Zeytinburnu ve Yeşildirek mağazalarımızın adres, telefon ve çalışma saatleri. Bize Ulaşın formu.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#FCFDFD;--ink:#0E1416;--gray:#7C8B8D;--line:#E4EAEB;--panel:#0A1315;
--teal:#128998;--sky:#74C9E3;--red:#E30613;
--wash:#F4F7F7;--field:#F2F5F6;
--sans:'Helvetica Neue',Helvetica,'Inter',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
/* ===== HEADER ===== */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid rgba(255,255,255,.14);transition:background .4s,border-color .4s,box-shadow .3s}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(4,10,14,.6),rgba(4,10,14,0));opacity:1;transition:opacity .4s}
header.scrolled::before{opacity:0}
header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(0,0,0,.05)}
.h-main{max-width:1560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,56px);height:78px;gap:clamp(16px,2vw,32px)}
.logo{flex-shrink:0;display:flex;align-items:center;line-height:0}
.logo .kb-logo{height:50px;width:auto;display:block;transition:filter .4s}
header .logo .kbl0{fill:#040007;transition:fill .4s}header .logo .kbl1{fill:#050008;transition:fill .4s}
header .logo .kbl2{stroke:#000000;transition:stroke .4s}
nav.mn{flex:1;display:flex;justify-content:center}
nav.mn ul{display:flex;align-items:center;gap:clamp(8px,1.4vw,24px)}
nav.mn a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap;color:#fff;position:relative}
nav.mn a:hover{opacity:1;color:var(--teal)}
nav.mn a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor}
header.scrolled nav.mn a{color:var(--ink)}
nav.mn .sep{width:1px;height:16px;background:rgba(255,255,255,.3);margin:0 4px;transition:background .4s}
header.scrolled nav.mn .sep{background:var(--line)}
nav.mn .sale{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding:8px 2px;transition:opacity .25s,color .4s;white-space:nowrap}
nav.mn .sale::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;transition:opacity .25s,transform .25s}
nav.mn .sale:hover{opacity:.7}
nav.mn .sale:hover::before{opacity:1;transform:scale(1.4)}
header.scrolled nav.mn .sale{color:var(--ink)}
.h-cta{background:#fff;color:var(--ink);padding:9px 18px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;border:1px solid #fff;flex-shrink:0}
.h-cta:hover{transform:translateY(-1px)}
header.scrolled .h-cta{background:var(--ink);color:#fff;border-color:var(--ink)}
header.scrolled .h-cta:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:background .4s}
header.scrolled .burger span{background:var(--ink)}
@media(max-width:1240px){nav.mn{display:none}.burger{display:block}}
.mobnav{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav ul{display:flex;flex-direction:column;text-align:center;gap:22px}
.mobnav a{font-size:18px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.mobnav .nc{position:absolute;top:24px;right:24px;font-size:30px;background:none;border:0;cursor:pointer;color:var(--ink)}
@media(max-width:560px){.h-cta{display:none}.logo .kb-logo{height:40px}.h-main{height:64px}}
/* ===== MASTHEAD ===== */
.masthead{position:relative;padding:calc(78px + clamp(52px,7vw,104px)) clamp(20px,4vw,56px) clamp(38px,5vw,60px);background:var(--panel);color:#fff;overflow:hidden}
.masthead::after{content:"";position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:0;height:1px;background:rgba(255,255,255,.14)}
.mh-med{position:absolute;inset:0;z-index:0;overflow:hidden}
.mh-med img,.mh-med video{width:100%;height:100%;object-fit:cover}
.mh-med::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,19,21,.90) 0%,rgba(10,19,21,.66) 38%,rgba(10,19,21,.26) 72%,rgba(10,19,21,.10) 100%)}
.mh-in{max-width:1480px;margin:0 auto;position:relative;z-index:2}
.mh-crumb{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);display:flex;align-items:center;gap:10px}
.mh-crumb a{opacity:.75;transition:opacity .2s}.mh-crumb a:hover{opacity:1}
.mh-crumb .slash{opacity:.4}
.mh-eyebrow{margin-top:24px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--teal)}
.masthead h1{font-family:var(--sans);font-weight:500;line-height:.95;letter-spacing:-.035em;font-size:clamp(44px,8vw,104px);margin-top:12px}
.masthead h1 em{font-style:normal;font-weight:500;color:var(--teal)}
.mh-lead{margin-top:22px;max-width:56ch;font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:rgba(255,255,255,.72);font-weight:300}
.mh-quick{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.qchip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.02em;color:#fff;transition:border-color .25s,background .25s,transform .2s}
.qchip:hover{border-color:var(--sky);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.qchip svg{width:16px;height:16px;flex-shrink:0;opacity:.85}
.qchip.wa:hover{border-color:#25D366}
/* ===== MAIN ===== */
.shell{max-width:1480px;margin:0 auto;padding:clamp(44px,5vw,76px) clamp(20px,4vw,56px) clamp(60px,7vw,100px)}
.cwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:960px){.cwrap{grid-template-columns:1fr;gap:44px}}
/* ---- FORM ---- */
.form-head h2{font-family:var(--sans);font-weight:500;font-size:clamp(30px,3.8vw,48px);line-height:1.0;letter-spacing:-.03em}
.form-head .req{font-family:var(--sans);margin-top:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.form-head .req b{color:var(--teal)}
form.kf{margin-top:44px;display:grid;gap:36px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media(max-width:480px){.row2{grid-template-columns:1fr;gap:36px}}
/* floating-label underline fields */
.ff{position:relative}
.ff input,.ff textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:9px 0;transition:border-color .25s}
.ff textarea{min-height:40px;line-height:1.6;resize:vertical}
.ff input::placeholder,.ff textarea::placeholder{color:transparent}
.ff label{position:absolute;left:0;top:9px;font-size:16px;color:var(--gray);pointer-events:none;transform-origin:left top;transition:transform .2s cubic-bezier(.2,.7,.2,1),color .2s ease}
.ff .star{color:var(--teal)}
.ff input:focus,.ff textarea:focus{outline:none;border-bottom-color:var(--teal)}
.ff input:focus~label,.ff input:not(:placeholder-shown)~label,
.ff textarea:focus~label,.ff textarea:not(:placeholder-shown)~label{transform:translateY(-27px) scale(.68);font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.ff.err input,.ff.err textarea{border-bottom-color:var(--red)}
.ff.err input~label,.ff.err textarea~label{color:var(--red)}
.ff .msg{font-family:var(--sans);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-top:9px;display:none}
.ff.err .msg{display:block}
/* select */
.ff.sel{padding-top:20px}
.ff.sel .lbl{position:absolute;top:0;left:0;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.ff.sel select{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:9px 24px 9px 0;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .25s}
.ff.sel select:focus{outline:none;border-bottom-color:var(--teal)}
.ff.sel::after{content:"";position:absolute;right:3px;bottom:16px;width:7px;height:7px;border-right:1.6px solid var(--gray);border-bottom:1.6px solid var(--gray);transform:rotate(45deg);pointer-events:none}
/* kvkk */
.kvkk{display:flex;align-items:flex-start;gap:13px;margin-top:2px}
.kvkk input{width:20px;height:20px;margin-top:1px;accent-color:var(--teal);flex-shrink:0;cursor:pointer}
.kvkk label{font-size:14px;line-height:1.6;color:var(--gray);cursor:pointer}
.kvkk.err label{color:var(--red)}
.kvkk a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.kvkk a:hover{color:var(--teal)}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8px}
.submit{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:16px 34px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s,gap .2s}
.submit .arw{transition:transform .2s}
.submit:hover{background:var(--teal);transform:translateY(-1px);gap:16px}
.submit:hover .arw{transform:translateX(3px)}
.submit:disabled{opacity:.6;cursor:default;transform:none;background:var(--teal)}
.form-ok{display:none;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;letter-spacing:.03em;color:var(--teal)}
.form-ok.show{display:flex}
.form-ok svg{width:18px;height:18px}
/* ---- STORE CARD (minimal) ---- */
.storecard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg)}
.sc-switch{display:flex;gap:clamp(20px,3vw,32px);padding:22px clamp(24px,3vw,32px) 0}
.sc-switch button{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.01em;padding:0 0 14px;border:0;background:transparent;color:var(--gray);cursor:pointer;position:relative;transition:color .25s}
.sc-switch button:hover{color:var(--ink)}
.sc-switch button.on{color:var(--ink)}
.sc-switch button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--teal)}
.sc-media{position:relative;margin:20px clamp(24px,3vw,32px) 0;border-radius:12px;overflow:hidden;background:var(--wash)}
.sc-photo{position:relative;aspect-ratio:16/10}
.sc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sc-map{position:absolute;inset:0;display:none}
.sc-map iframe{width:100%;height:100%;border:0;display:block}
.storecard.mapview .sc-photo{visibility:hidden}
.storecard.mapview .sc-map{display:block}
.sc-hours{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;background:rgba(252,253,253,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);font-size:12.5px;font-weight:500;padding:8px 13px;border-radius:999px;z-index:3}
.sc-hours svg{width:14px;height:14px;color:var(--teal)}
.storecard.mapview .sc-hours{display:none}
.sc-maptoggle{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(10,19,21,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:12px;font-weight:500;letter-spacing:.01em;padding:8px 14px;border-radius:999px;border:0;cursor:pointer;transition:background .2s;z-index:3}
.sc-maptoggle:hover{background:var(--ink)}
.sc-maptoggle svg{width:13px;height:13px}
.sc-body{padding:clamp(28px,3vw,36px) clamp(24px,3vw,32px)}
.sc-tag{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.sc-body h3{font-family:var(--sans);font-weight:500;font-size:clamp(24px,2.4vw,30px);margin:11px 0 26px;letter-spacing:-.02em}
.sc-line{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--ink);padding:15px 0;border-top:1px solid var(--line)}
.sc-line:first-of-type{border-top:0;padding-top:0}
.sc-line svg{width:17px;height:17px;color:var(--gray);flex-shrink:0;margin-top:1px}
.sc-line a{transition:color .2s}
.sc-line a:hover{color:var(--teal)}
.sc-btns{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.03em;transition:transform .2s,background .2s}
.pill:hover{transform:translateY(-1px);background:#000}
.pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pill.ghost:hover{background:var(--wash);border-color:var(--ink)}
.pill svg{width:15px;height:15px}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:2}
.ft-main{max-width:1480px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px)}
.ft-col .ft-title{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--teal);display:inline-block}
.ft-col ul{display:flex;flex-direction:column;gap:12px}
.ft-col a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;transition:opacity .25s}
.ft-col a:hover{opacity:1;color:var(--teal)}
.ft-bottom{max-width:1480px;margin:0 auto;padding:20px clamp(20px,4vw,56px) 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--gray)}
@media(max-width:900px){.ft-main{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ft-main{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.hero .slide.active .bg,.hero .slide.active .hero-c,.hero img.bg,.mt{animation:none!important}
}
/* ===================== MOBIL UYUM ===================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip} /* yatay tasmaya karsi (sticky'yi bozmaz) */
img,video,svg,iframe{max-width:100%}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
@media(max-width:560px){
/* dekoratif buyuk daireler tasmasin */
.prod::before,.stmt::before,.news-cta::before{width:280px;height:280px}
}
@media(max-width:420px){
.ft-main{grid-template-columns:1fr;gap:26px}
.stats-in{grid-template-columns:1fr}
.h-main{padding-left:14px;padding-right:14px}
.mobnav a{font-size:16px}
.mobnav ul{gap:16px}
}
@media(max-width:360px){
.logo img,.logo .kb-logo{height:34px}
}
/* ---- mobilde marka/magaza karti: gorsel ustte, baslik gorselin uzerinde ---- */
.mm-wrap{display:contents}
.mm-cap{display:none}
@media(max-width:900px){
.si{display:flex;flex-direction:column;margin-bottom:38px}
.si>.body,.si .body{display:flex;flex-direction:column}
.si .ix{display:none}
.mm-wrap{display:block;position:relative;order:-1;width:100%;
margin:0 0 20px;border-radius:16px;overflow:hidden;background:#0d1416}
.mm-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(8,12,14,0) 48%,rgba(8,12,14,.74) 100%)}
.mm-wrap .mm,.mm-wrap img.mm{display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;margin:0;clip-path:none;border-radius:0;min-height:0;max-height:none}
.mm-wrap .mm img{width:100%;height:100%;object-fit:cover}
.mm-cap{display:block;position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
/* metin blogu rahat aksin */
.si .cat{margin-bottom:10px}
.si h3{font-size:clamp(19px,5.2vw,24px);line-height:1.35}
.si .brand-logo{margin:0 0 14px}
.s-meta .row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.s-meta .row .k{font-size:10px;letter-spacing:.2em}
.s-meta .row .v{font-size:14px;line-height:1.55}
}
/* ---- hero gorselleri: mobilde daha dengeli kadraj ---- */
@media(max-width:640px){
.hero{min-height:min(74vh,620px)}
.hero img.bg,.hero video.bg,.hero .bg{object-position:center center}
.hero-l h1{font-size:clamp(32px,9.5vw,46px)}
.hero-l p{font-size:14px;max-width:100%}
}
</style>
</head>
<body>
<header id="hdr">
<div class="h-main">
<a href="anasayfa.html" class="logo" aria-label="Kozabiat Anasayfa"><img class="kb-logo" src="/media/517a25dc6b2087f0923f95cf1c449d7d239325496c90662c2b3d1fb7f32d7208.png" alt="Kozabiat Tekstil"></a>
<nav class="mn">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li class="sep"></li>
<li><a href="https://b2b.kozabiat.com" target="_blank" class="sale">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank" class="sale">Perakende Satış</a></li>
</ul>
</nav>
<a href="iletisim.html" class="h-cta">İletişim</a>
<button class="burger" aria-label="Menü" onclick="document.getElementById('mn').classList.add('open')"><span></span><span></span><span></span></button>
</div>
</header>
<div class="mobnav" id="mn">
<button class="nc" aria-label="Kapat" onclick="document.getElementById('mn').classList.remove('open')">×</button>
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li><li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="markalarimiz.html">Markalarımız</a></li><li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li><li><a href="medya.html">Kozabiat Medya</a></li>
<li></li>
<li><a href="https://b2b.kozabiat.com" target="_blank">Toptan Satış</a></li>
<li><a href="https://dominantshop.com" target="_blank">Perakende Satış</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<!-- ===== MASTHEAD ===== -->
<section class="masthead">
<div class="mh-med">
<img data-kb-m="iletisim2" data-slot="hero" src="https://picsum.photos/seed/kozailetisim/2400/1400" alt="Kozabiat Tekstil">
</div>
<div class="mh-in">
<div class="mh-eyebrow">Bize Ulaşın</div>
<h1>İletişim<em>.</em></h1>
<p class="mh-lead">Toptan, perakende ya da kurumsal her konuda buradayız. Formu doldurun size dönelim; ya da İstanbul'daki üç noktamızdan birine doğrudan uğrayın.</p>
<div class="mh-quick">
<a href="tel:+902165277178" class="qchip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>+90 (216) 527 71 78</a>
<a href="mailto:
[email protected]" class="qchip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
[email protected]</a>
<a href="https://wa.me/905010031842" target="_blank" rel="noopener" class="qchip wa"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.2-1.7-.9-2-1s-.5-.1-.7.1c-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5s0-.4 0-.5c-.1-.2-.7-1.6-.9-2.2-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2a10 10 0 0 0-8.5 15.3L2 22l4.8-1.3A10 10 0 1 0 12 2z"/></svg>WhatsApp</a>
</div>
</div>
</section>
<div class="shell">
<div class="cwrap">
<!-- ===== FORM ===== -->
<div class="form-side reveal">
<div class="form-head">
<h2>Bize Ulaşın</h2>
<div class="req"><b>*</b> işaretli alanların doldurulması zorunludur.</div>
</div>
<form class="kf" id="kf" novalidate>
<div class="row2">
<div class="ff" data-f="ad">
<input id="ad" name="ad" type="text" placeholder=" " autocomplete="given-name">
<label for="ad">Adınız <span class="star">*</span></label>
<div class="msg">Lütfen adınızı girin.</div>
</div>
<div class="ff" data-f="soyad">
<input id="soyad" name="soyad" type="text" placeholder=" " autocomplete="family-name">
<label for="soyad">Soyadınız <span class="star">*</span></label>
<div class="msg">Lütfen soyadınızı girin.</div>
</div>
</div>
<div class="row2">
<div class="ff" data-f="tel">
<input id="tel" name="tel" type="tel" placeholder=" " autocomplete="tel">
<label for="tel">Telefon numaranız <span class="star">*</span></label>
<div class="msg">Geçerli bir telefon numarası girin.</div>
</div>
<div class="ff" data-f="email">
<input id="email" name="email" type="email" placeholder=" " autocomplete="email">
<label for="email">E-posta adresiniz <span class="star">*</span></label>
<div class="msg">Geçerli bir e-posta adresi girin.</div>
</div>
</div>
<div class="ff sel" data-f="konu">
<span class="lbl">Konu</span>
<select id="konu" name="konu">
<option value="Genel">Genel Bilgi</option>
<option value="Toptan">Toptan Satış</option>
<option value="Perakende">Perakende Satış</option>
<option value="Kariyer">Kariyer</option>
<option value="Basin">Basın</option>
</select>
</div>
<div class="ff" data-f="mesaj">
<textarea id="mesaj" name="mesaj" placeholder=" "></textarea>
<label for="mesaj">Mesajınız / Notunuz <span class="star">*</span></label>
<div class="msg">Lütfen bir mesaj yazın.</div>
</div>
<div class="kvkk" data-f="kvkk">
<input id="kvkk" name="kvkk" type="checkbox">
<label for="kvkk">Kişisel Verilerin Korunması Kanunu hakkındaki bilgilendirmeyi okudum ve kabul ediyorum.</label>
</div>
<div class="form-foot">
<div class="form-ok" id="formOk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Mesajınız alındı — en kısa sürede dönüş yapacağız.</div>
<button type="submit" class="submit" id="submitBtn">Gönder <span class="arw">→</span></button>
</div>
</form>
</div>
<!-- ===== STORE CARD ===== -->
<div class="storecard reveal" id="storecard">
<div class="sc-switch" id="scSwitch">
<button data-store="merkez" class="on">Merkez Ofis</button>
<button data-store="zeytinburnu">Zeytinburnu</button>
<button data-store="yesildirek">Yeşildirek</button>
</div>
<div class="sc-media">
<div class="sc-photo"><img id="scImg" alt="Kozabiat merkez ofis">
<span class="sc-kaynak" hidden aria-hidden="true">
<img data-kb-m="iletisim1" data-slot="store-merkez" src="https://picsum.photos/id/1074/1200/675" alt="Merkez Ofis">
<img data-kb-m="iletisim3" data-slot="store-zeytinburnu" src="https://picsum.photos/id/1078/1200/675" alt="Zeytinburnu Mağaza">
<img data-kb-m="iletisim4" data-slot="store-yesildirek" src="https://picsum.photos/id/1081/1200/675" alt="Yeşildirek Mağaza">
</span>
</div>
<div class="sc-map"><iframe id="scMap" title="Harita" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src=""></iframe></div>
<div class="sc-hours"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span id="scHours">Pazartesi – Cuma 08:00–18:00</span></div>
<button class="sc-maptoggle" id="scMapToggle" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg><span id="scMapLbl">Haritada gör</span></button>
</div>
<div class="sc-body">
<div class="sc-tag" id="scTag">Fabrika & Genel Müdürlük</div>
<h3 id="scName">Merkez Ofis</h3>
<div class="sc-line"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg><span id="scAddr">Merkez Mah. Çavuşbaşı Cd. Aytekin Sk. No:2, Çekmeköy / İstanbul</span></div>
<div class="sc-line"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg><a id="scTel" href="tel:+902165277178">+90 (216) 527 71 78</a></div>
<div class="sc-line"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg><a href="mailto:
[email protected]">
[email protected]</a></div>
<div class="sc-btns">
<a id="scDir" class="pill" href="#" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>Yol tarifi al</a>
<a id="scCall" class="pill ghost" href="tel:+902165277178"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>Ara</a>
</div>
</div>
</div>
</div>
</div>
<!-- ===== WHATSAPP FAB ===== -->
<!-- ===== FOOTER ===== -->
<footer>
<div class="ft-main">
<div class="ft-col">
<div class="ft-title">Kurumsal</div>
<ul>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="hakkimizda.html">Vizyon & Misyon</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Markalar</div>
<ul>
<li><a href="markalarimiz.html">Dominant</a></li>
<li><a href="markalarimiz.html">Rockhard</a></li>
<li><a href="markalarimiz.html">Domikids</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Üretim</div>
<ul>
<li><a href="sertifikalarimiz.html">Sertifikalarımız</a></li>
<li><a href="medya.html">Kozabiat Medya</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">Medya</div>
<ul>
<li><a href="medya.html">Basın</a></li>
<li><a href="medya.html">Galeri</a></li>
</ul>
</div>
<div class="ft-col">
<div class="ft-title">İletişim</div>
<ul>
<li><a href="iletisim.html" class="active">Bize Ulaşın</a></li>
<li><a href="magazalarimiz.html">Mağazalarımız</a></li>
</ul>
</div>
</div>
<div class="ft-bottom">
<span>© 1996 – 2026 Kozabiat Tekstil Sanayi ve Ticaret A.Ş.</span>
<span>İçinizdeki Moda</span>
</div>
</footer>
<script>
(function(){
const R=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
/* header */
const H=document.getElementById('hdr');
const onScroll=()=>H.classList.toggle('scrolled',window.scrollY>40);
window.addEventListener('scroll',onScroll,{passive:true});onScroll();
/* reveal */
if(!R){
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.12,rootMargin:'0px 0px -6% 0px'});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
}else{document.querySelectorAll('.reveal').forEach(el=>el.classList.add('in'));}
/* ===== STORE DATA ===== */
const STORES={
merkez:{name:'Merkez Ofis',tag:'Fabrika & Genel Müdürlük',
addr:'Merkez Mah. Çavuşbaşı Cd. Aytekin Sk. No:2, Çekmeköy / İstanbul',
tel:'+90 (216) 527 71 78',telHref:'+902165277178',
hours:'Pazartesi – Cuma 08:00–18:00',
img:'https://picsum.photos/id/1074/1200/675',
dir:'https://www.google.com/maps/dir//Kozabiat+Tekstil+%C3%87EKMEK%C3%96Y+FABR%C4%B0KA,+Aytekin+Sk.+No:2,+34782+%C3%87ekmek%C3%B6y%2F%C4%B0stanbul/@41.037869,29.174865,17z',
embed:'https://maps.google.com/maps?q=41.037869,29.174865&z=16&hl=tr&output=embed'},
zeytinburnu:{name:'Zeytinburnu Mağaza',tag:'Toptan & Perakende',
addr:'Telsiz Mah. Balıklı Yolu Sk. No:42/1, Zeytinburnu / İstanbul',
tel:'+90 (212) 510 27 57',telHref:'+902125102757',
hours:'Pazartesi – Cumartesi 09:00–19:00',
img:'https://picsum.photos/id/1078/1200/675',
dir:'https://www.google.com/maps/dir//Kozabiat+Tekstil+ZEYT%C4%B0NBURNU+MA%C4%9EAZA,+Bal%C4%B1kl%C4%B1+Yolu+No:42,+34020+Zeytinburnu%2F%C4%B0stanbul/@41.0015092,28.9103397,17z',
embed:'https://maps.google.com/maps?q=41.0015092,28.9103397&z=16&hl=tr&output=embed'},
yesildirek:{name:'Yeşildirek Mağaza',tag:'Toptan & Perakende',
addr:'Sururi Mah. Tarakçı Caferağa Sk. Niğde Han No:3 K:15, Yeşildirek - Fatih / İstanbul',
tel:'+90 (212) 511 12 01',telHref:'+902125111201',
hours:'Pazartesi – Cumartesi 09:00–19:00',
img:'https://picsum.photos/id/1081/1200/675',
dir:'https://www.google.com/maps/dir//Kozabiat+Tekstil+YE%C5%9E%C4%B0LD%C4%B0REK+MA%C4%9EAZA,+Sururi+Mah.+34120+Fatih%2F%C4%B0stanbul/@41.0130034,28.971307,18z',
embed:'https://maps.google.com/maps?q=41.0130034,28.971307&z=16&hl=tr&output=embed'}
};
const card=document.getElementById('storecard');
const els={img:document.getElementById('scImg'),hours:document.getElementById('scHours'),
tag:document.getElementById('scTag'),name:document.getElementById('scName'),
addr:document.getElementById('scAddr'),tel:document.getElementById('scTel'),
dir:document.getElementById('scDir'),call:document.getElementById('scCall'),
map:document.getElementById('scMap')};
let cur='merkez';
/* magaza fotograflari icerik panelinden yonetilir — gizli kaynak gorsellerden okunur */
function kbMagazaGorsel(key){
var el=document.querySelector('.sc-kaynak [data-slot="store-'+key+'"]');
if(!el||el.tagName==='VIDEO') return '';
return el.getAttribute('src')||el.currentSrc||'';
}
function render(key){
const s=STORES[key];cur=key;
els.img.src=kbMagazaGorsel(key)||s.img;els.img.alt='Kozabiat '+s.name;
els.hours.textContent=s.hours;els.tag.textContent=s.tag;els.name.textContent=s.name;
els.addr.textContent=s.addr;els.tel.textContent=s.tel;els.tel.href='tel:'+s.telHref;
els.dir.href=s.dir;els.call.href='tel:'+s.telHref;
if(card.classList.contains('mapview'))els.map.src=s.embed;
document.querySelectorAll('#scSwitch button').forEach(b=>b.classList.toggle('on',b.dataset.store===key));
}
document.querySelectorAll('#scSwitch button').forEach(b=>b.addEventListener('click',()=>render(b.dataset.store)));
render(cur);
/* foto <-> harita */
const mapToggle=document.getElementById('scMapToggle'),mapLbl=document.getElementById('scMapLbl');
mapToggle.addEventListener('click',()=>{
const toMap=!card.classList.contains('mapview');
card.classList.toggle('mapview',toMap);
mapLbl.textContent=toMap?'Fotoğrafa dön':'Haritada gör';
if(toMap)els.map.src=STORES[cur].embed;
});
/* ===== FORM VALIDATION ===== */
const form=document.getElementById('kf');
const okMsg=document.getElementById('formOk');
const btn=document.getElementById('submitBtn');
const emailRe=/^[^@\s]+@[^@\s]+\.[^@\s]+$/;
const telRe=/[0-9]{7,}/;
function setErr(name,bad){
const f=form.querySelector('.ff[data-f="'+name+'"], .kvkk[data-f="'+name+'"]');
if(f)f.classList.toggle('err',bad);return !bad;
}
form.addEventListener('submit',function(e){
e.preventDefault();
let ok=true;
ok=setErr('ad', !form.ad.value.trim())&&ok;
ok=setErr('soyad', !form.soyad.value.trim())&&ok;
ok=setErr('tel', !telRe.test(form.tel.value.replace(/\D/g,'')))&&ok;
ok=setErr('email', !emailRe.test(form.email.value.trim()))&&ok;
ok=setErr('mesaj', !form.mesaj.value.trim())&&ok;
ok=setErr('kvkk', !form.kvkk.checked)&&ok;
if(!ok){const first=form.querySelector('.err');if(first)first.scrollIntoView({behavior:R?'auto':'smooth',block:'center'});return;}
btn.disabled=true;btn.textContent='Gönderiliyor';
var gonder={ad:form.ad.value.trim(),soyad:form.soyad.value.trim(),tel:form.tel.value.trim(),email:form.email.value.trim(),konu:form.konu.value,mesaj:form.mesaj.value.trim(),kvkk:true};
var kok='';try{kok=parent.location.origin;}catch(err){}
fetch(kok+'/api/contact',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(gonder)})
.then(function(r){return r.json().catch(function(){return {};}).then(function(j){if(!r.ok)throw new Error(j.error||'Gönderilemedi');});})
.then(function(){
btn.textContent='Gönderildi';
okMsg.classList.add('show');
form.querySelectorAll('input,textarea,select').forEach(el=>el.disabled=true);
})
.catch(function(){
btn.disabled=false;btn.innerHTML='Gönder <span class="arw">→</span>';
});
});
form.querySelectorAll('input,textarea').forEach(el=>el.addEventListener('input',()=>{
const f=el.closest('.ff,.kvkk');if(f)f.classList.remove('err');
}));
form.kvkk.addEventListener('change',()=>{const f=form.kvkk.closest('.kvkk');if(f)f.classList.remove('err');});
})();
</script>
<script>
/* === KOZABIAT TEK CATI KOPRUSU — sayfanin kendi kodu degismez === */
(function(){
var FILE={'anasayfa.html':'anasayfa','hakkimizda.html':'hakkimizda','markalarimiz.html':'markalarimiz',
'sertifikalarimiz.html':'sertifikalarimiz','magazalarimiz.html':'magazalarimiz',
'iletisim.html':'iletisim','medya.html':'medya',
'haberler.html':'medya','fuarlar.html':'medya'};
var SITE={'https://www.kozabiat.com':'anasayfa','https://kozabiat.com':'anasayfa',
'https://www.kozabiat.com/hakkimizda.html':'hakkimizda',
'https://www.kozabiat.com/markalarimiz':'markalarimiz',
'https://www.kozabiat.com/dominant':'markalarimiz',
'https://www.kozabiat.com/rockhard':'markalarimiz',
'https://www.kozabiat.com/domikids':'markalarimiz',
'https://www.kozabiat.com/sertifikalarimiz.html':'sertifikalarimiz',
'https://www.kozabiat.com/magazalarimiz':'magazalarimiz',
'https://www.kozabiat.com/haberler':'medya',
'https://www.kozabiat.com/iletisim':'iletisim',
'https://www.kozabiat.com/fuarlar.html':'medya'};
var LABEL={'anasayfa':'anasayfa','ana sayfa':'anasayfa','hakkımızda':'hakkimizda',
'markalarımız':'markalarimiz','dominant':'markalarimiz','rockhard':'markalarimiz',
'domikids':'markalarimiz','sertifikalarımız':'sertifikalarimiz',
'mağazalarımız':'magazalarimiz','haberler':'medya','fuarlar':'medya','kozabiat medya':'medya','medya':'medya','iletişim':'iletisim',
'bize ulaşın':'iletisim'};
var DEAD=' dead';
/* Turkce buyuk noktali I harfi toLowerCase() ile 'i'+U+0307 uretir -> temizle */
function norm(s){
return (s||'').replace(/\s+/g,' ').trim().toLowerCase().replace(/̇/g,'');
}
function resolve(a){
var raw=(a.getAttribute('href')||'').trim();
var label=norm(a.getAttribute('data-kb-tr')||a.textContent);
if(a.target==='_blank') return null; /* yeni sekmede acilanlara dokunma (haber detaylari vb.) */
if(a.closest('.logo')) return 'anasayfa';
if(/^(mailto:|tel:|javascript:)/i.test(raw)) return null;
if(/^https?:/i.test(raw)){
/* b2b, dominantshop, google maps, whatsapp vb. -> dokunma */
if(!/^https?:\/\/(www\.)?kozabiat\.com(\/|$)/i.test(raw)) return null;
return SITE[raw.replace(/\/+$/,'')] || DEAD;
}
var rel=raw.replace(/^\.\//,'');
if(FILE[rel]) return FILE[rel];
if(a.closest('header')) return LABEL[label] || DEAD; /* header menusu her zaman sayfaya gider */
if(raw==='#'||raw==='') return LABEL[label] || null; /* footer'daki olu linkler */
return null; /* #hk, #mk gibi sayfa ici anchor'lara dokunma */
}
document.addEventListener('click',function(e){
var t=e.target;
var a=(t&&t.closest)?t.closest('a'):null;
if(!a) return;
if(e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey) return;
var page=resolve(a);
if(!page) return;
e.preventDefault();
if(page===DEAD) return;
try{parent.postMessage({kb:1,type:'nav',page:page},'*');}catch(err){}
},true);
/* panel kisayolu iframe icinden de calissin */
document.addEventListener('keydown',function(e){
if((e.metaKey||e.ctrlKey)&&String(e.key||'').toLowerCase()==='e'){
e.preventDefault();
try{parent.postMessage({kb:1,type:'panel'},'*');}catch(err){}
}
});
function announce(){
try{parent.postMessage({kb:1,type:'ready',
page:document.documentElement.getAttribute('data-kb-page'),title:document.title},'*');}catch(err){}
}
if(document.readyState==='complete'){announce();}else{window.addEventListener('load',announce);}
})();
</script>
</body>
</html>