:root{
  --zemin:#F7F6F2; --yuzey:#FFFFFF; --murekkep:#14161B; --gri:#697077;
  --cizgi:#E9E6DE; --vurgu:#2E5BFF; --vurgu-koyu:#1E3FBF; --lime:#D9F45C;
  --radius:20px; --golge:0 1px 2px rgba(20,22,27,.04);
  --golge-buyuk:0 24px 48px -16px rgba(20,22,27,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--zemin);color:var(--murekkep);
  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.kap{max-width:1160px;margin:0 auto;padding:0 24px}

/* header */
header{position:sticky;top:0;z-index:90;background:rgba(247,246,242,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cizgi)}
.ustbar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{font-family:'Space Grotesk';font-weight:700;font-size:1.08rem;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.logo .nokta{width:10px;height:10px;border-radius:50%;background:var(--vurgu);
  box-shadow:0 0 0 4px rgba(46,91,255,.15)}
nav{display:flex;gap:28px;font-size:.92rem;font-weight:500;color:var(--gri)}
nav a:hover{color:var(--murekkep)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:99px;
  font-weight:600;font-size:.92rem;transition:.18s;border:1px solid transparent}
.btn-ink{background:var(--murekkep);color:#fff}
.btn-ink:hover{background:var(--vurgu);transform:translateY(-1px)}
.btn-ghost{border-color:var(--cizgi);background:var(--yuzey);color:var(--murekkep)}
.btn-ghost:hover{border-color:var(--murekkep)}
.btn-wp{background:#22c55e;color:#fff}
.btn-wp:hover{background:#16a34a;transform:translateY(-1px)}
.wp-ikon{width:8px;height:8px;border-radius:50%;background:#fff;animation:nabiz 1.8s infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.35}}

/* hero */
.hero{padding:72px 0 64px;position:relative;overflow:hidden}
.hero .kap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.etiket{display:inline-flex;align-items:center;gap:8px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:99px;padding:7px 16px;font-size:.82rem;font-weight:600;color:var(--gri);margin-bottom:22px}
.etiket b{color:var(--vurgu)}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);font-weight:700}
.hero h1 .alt-cizgi{position:relative;white-space:nowrap}
.hero h1 .alt-cizgi::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.28em;
  background:var(--lime);z-index:-1;border-radius:4px}
.hero p{margin-top:20px;font-size:1.08rem;color:var(--gri);max-width:520px}
.hero .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .kucuk-not{margin-top:16px;font-size:.84rem;color:var(--gri)}

/* hero görsel yığını */
.yigin{position:relative;height:440px}
.yigin .kartcik{position:absolute;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:var(--radius);box-shadow:var(--golge-buyuk);overflow:hidden;transition:.3s}
.yigin .kartcik img{width:100%;height:100%;object-fit:contain;padding:14px}
.yigin .k1{width:62%;height:82%;left:0;top:4%;transform:rotate(-4deg);z-index:2}
.yigin .k2{width:52%;height:66%;right:0;bottom:0;transform:rotate(5deg);z-index:3}
.yigin .rozet{position:absolute;z-index:4;left:46%;top:0;background:var(--murekkep);color:#fff;
  border-radius:14px;padding:10px 16px;font-size:.8rem;font-weight:600;box-shadow:var(--golge-buyuk)}
.yigin .rozet b{color:var(--lime);display:block;font-size:1.05rem;font-family:'Space Grotesk'}

/* stat şeridi */
.statlar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-8px}
.stat{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:16px;padding:20px 22px;box-shadow:var(--golge)}
.stat b{font-family:'Space Grotesk';font-size:1.5rem;display:block;letter-spacing:-.02em}
.stat span{font-size:.85rem;color:var(--gri)}

section{padding:72px 0}
.bolum-baslik{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700}
.altyazi{color:var(--gri);margin-top:8px;max-width:560px}
.hepsi{font-weight:600;font-size:.92rem;color:var(--vurgu);white-space:nowrap}
.hepsi:hover{color:var(--vurgu-koyu)}

/* ürün kartları */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--radius);
  overflow:hidden;transition:.22s;display:flex;flex-direction:column;position:relative}
.kart:hover{transform:translateY(-4px);box-shadow:var(--golge-buyuk);border-color:#DDD9CE}
.kart .gorsel-alan{background:#fff;aspect-ratio:1/1.05;display:flex;align-items:center;justify-content:center;
  padding:18px;border-bottom:1px solid var(--cizgi)}
.kart .gorsel-alan img{max-height:100%;object-fit:contain;transition:.3s}
.kart:hover .gorsel-alan img{transform:scale(1.04)}
.kart .ic{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.kart h3{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.kart .mini{color:var(--gri);font-size:.83rem}
.kart .al{margin-top:14px;font-weight:600;font-size:.9rem;color:var(--vurgu);display:flex;align-items:center;gap:6px}
.kart .al::after{content:"→";transition:.18s}
.kart:hover .al::after{transform:translateX(4px)}

/* kategori banner */
.iki-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{border-radius:calc(var(--radius) + 6px);padding:44px 40px;position:relative;overflow:hidden;min-height:240px;
  display:flex;flex-direction:column;justify-content:end;gap:8px}
.panel h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.panel p{font-size:.95rem;max-width:380px}
.panel .git{margin-top:14px;font-weight:600;font-size:.92rem}
.panel-ink{background:var(--murekkep);color:#fff}
.panel-ink p{color:#B9BEC6}
.panel-ink .git{color:var(--lime)}
.panel-lime{background:var(--lime);color:var(--murekkep)}
.panel-lime p{color:#4A5320}
.panel-lime .git{color:var(--murekkep)}

/* ölçü tablosu */
.tablo-sar{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--radius);
  overflow:auto;box-shadow:var(--golge)}
table.olcu{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
table.olcu th{font-family:'Space Grotesk';text-align:left;padding:16px 22px;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--gri);border-bottom:1px solid var(--cizgi)}
table.olcu td{padding:14px 22px;border-bottom:1px solid var(--cizgi)}
table.olcu tr:last-child td{border-bottom:none}
table.olcu tr:hover td{background:#FAFAF7}
table.olcu a{color:var(--vurgu);font-weight:600}

/* SSS */
.sss details{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:16px;
  padding:20px 24px;margin-bottom:12px;transition:.18s}
.sss details[open]{border-color:var(--vurgu);box-shadow:var(--golge)}
.sss summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px}
.sss summary::after{content:"+";font-family:'Space Grotesk';font-size:1.25rem;color:var(--vurgu);line-height:1}
.sss details[open] summary::after{content:"–"}
.sss p{margin-top:12px;color:var(--gri);font-size:.95rem}

/* ürün sayfası */
.ekmek{font-size:.84rem;color:var(--gri);margin:26px 0 6px}
.ekmek a:hover{color:var(--murekkep)}
.urun-sayfa{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;padding:32px 0 60px}
.urun-gorsel{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:calc(var(--radius) + 4px);
  padding:28px;box-shadow:var(--golge);position:sticky;top:92px}
.urun-sayfa h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.marka-cip{display:inline-flex;align-items:center;gap:7px;background:var(--yuzey);border:1px solid var(--cizgi);
  border-radius:99px;padding:5px 14px;font-size:.8rem;font-weight:600;color:var(--gri);margin:14px 0 18px}
.ozellik{width:100%;border-collapse:collapse;margin:22px 0;font-size:.94rem;background:var(--yuzey);
  border:1px solid var(--cizgi);border-radius:16px;overflow:hidden}
.ozellik td{padding:12px 18px;border-bottom:1px solid var(--cizgi)}
.ozellik tr:last-child td{border-bottom:none}
.ozellik td:first-child{color:var(--gri);width:44%}
.fiyat-kutu{background:linear-gradient(135deg,#14161B,#232733);color:#fff;border-radius:var(--radius);
  padding:26px 28px;margin:24px 0}
.fiyat-kutu b{font-family:'Space Grotesk';font-size:1.12rem}
.fiyat-kutu p{color:#B9BEC6;font-size:.9rem;margin-top:6px}

/* CTA bandı */
.cta-band{background:var(--murekkep);border-radius:calc(var(--radius) + 8px);color:#fff;
  padding:56px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,rgba(46,91,255,.35),transparent 70%)}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem);max-width:520px;position:relative}
.cta-band p{color:#B9BEC6;margin-top:10px;position:relative}

footer{padding:56px 0 36px;border-top:1px solid var(--cizgi);margin-top:32px;font-size:.92rem;color:var(--gri)}
footer .grid{grid-template-columns:2fr 1fr 1fr;gap:40px}
footer h4{font-family:'Space Grotesk';color:var(--murekkep);margin-bottom:14px;font-size:.98rem}
footer a:hover{color:var(--vurgu)}
.telif{margin-top:40px;padding-top:20px;border-top:1px solid var(--cizgi);font-size:.8rem;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* güven blokları */
.stok-rozet{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:#15803d;
  background:#F0FDF4;border:1px solid #BBF7D0;border-radius:99px;padding:4px 12px}
.stok-rozet::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;
  animation:nabiz 1.8s infinite}
.adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:adim}
.adim{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--radius);
  padding:28px;position:relative;counter-increment:adim}
.adim::before{content:counter(adim,decimal-leading-zero);font-family:'Space Grotesk';font-weight:700;
  font-size:.95rem;color:var(--vurgu);background:rgba(46,91,255,.08);border-radius:10px;
  padding:6px 12px;display:inline-block;margin-bottom:16px}
.adim h3{font-size:1.05rem;margin-bottom:8px}
.adim p{font-size:.9rem;color:var(--gri)}
.adim .sure{margin-top:12px;font-size:.8rem;font-weight:600;color:var(--vurgu)}
.garanti{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.garanti-kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:8px}
.garanti-kart .ikon{width:38px;height:38px;border-radius:11px;background:rgba(46,91,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.garanti-kart b{font-size:.95rem;letter-spacing:-.01em}
.garanti-kart span{font-size:.83rem;color:var(--gri)}
.yakin{margin-top:36px}
.yakin h3{font-size:1.05rem;margin-bottom:14px}
.yakin .liste{display:flex;gap:10px;flex-wrap:wrap}
.yakin .liste a{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:99px;
  padding:8px 18px;font-size:.88rem;font-weight:600;transition:.15s}
.yakin .liste a:hover{border-color:var(--vurgu);color:var(--vurgu)}
.tel-link{font-weight:600;font-size:.92rem;color:var(--gri);white-space:nowrap}
.tel-link:hover{color:var(--murekkep)}
.wp-sabit{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;padding:12px 16px;
  background:rgba(247,246,242,.94);backdrop-filter:blur(12px);border-top:1px solid var(--cizgi)}
.wp-sabit .btn{width:100%;justify-content:center;padding:14px}
@media(max-width:900px){
  .hero .kap{grid-template-columns:1fr}
  .yigin{height:340px;max-width:480px}
  .statlar{grid-template-columns:repeat(2,1fr)}
  .iki-panel{grid-template-columns:1fr}
  .urun-sayfa{grid-template-columns:1fr}
  .urun-gorsel{position:static}
  nav{display:none}
  .tel-link{display:none}
  .adimlar{grid-template-columns:1fr}
  .garanti{grid-template-columns:repeat(2,1fr)}
  .wp-sabit{display:block}
  footer{padding-bottom:96px}
}