/* atbakimi.com.tr — Laboratuvar yönü: beyaz zemin, Space Grotesk + IBM Plex Mono, erik vurgusu */
:root{
  --zemin:#ffffff; --krem:#f7f6f2; --nane:#ecf3ef; --murekkep:#0f1412; --metin:#2f3b36; --soluk:#5f6b66; --cizgi:#e3e8e5;
  --erik:#6d1f5b; --erik-acik:#f4e9f1; --yesil:#2e7d3a;
  --f-bas:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --kap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--zemin);color:var(--murekkep);font:400 17px/1.65 var(--f-bas);cursor:url(../img/nal.png) 22 22,auto;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a,button{cursor:url(../img/nal.png) 22 22,pointer}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.kap{max-width:var(--kap);margin:0 auto;padding-inline:40px}
@media(max-width:760px){.kap{padding-inline:18px}}

/* üst menü */
.ust{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--cizgi)}
.ust .kap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.marka{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.marka b{font:700 23px var(--f-bas);letter-spacing:-.035em}.marka b span{color:var(--erik)}
.marka small{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soluk)}
.menu{display:flex;gap:26px;list-style:none}
.menu a{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--soluk);padding:6px 0;border-bottom:1.5px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--murekkep);border-color:var(--erik)}
.menu-btn{display:none;background:none;border:1px solid var(--cizgi);border-radius:99px;padding:8px 14px;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--murekkep)}
@media(max-width:980px){.menu-btn{display:block}.menu{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--cizgi);padding:8px 18px 16px}.menu.acik{display:flex}.menu a{display:block;padding:12px 0;border-bottom:1px solid var(--cizgi)}}

/* tipografi */
.etiket{display:inline-flex;gap:10px;align-items:center;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;padding:8px 14px;border:1px solid var(--cizgi);border-radius:99px;background:#fff}
.etiket i{width:8px;height:8px;border-radius:50%;background:var(--erik);display:block}
.ust-baslik{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--erik);margin-bottom:16px;display:block}
h1,h2,h3{font-family:var(--f-bas);letter-spacing:-.04em;text-wrap:balance}
h1{font-weight:700;font-size:clamp(44px,6.2vw,94px);line-height:.98}
h2{font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1.02}
h3{font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.02em}
h1 em,h2 em{font-style:normal;color:var(--erik)}
.giris{font-size:19px;color:var(--metin);max-width:58ch}
p{max-width:68ch}
.metin p+p{margin-top:16px}
.metin p,.metin li{color:var(--metin)}
sup.k{font:500 11px var(--f-mono);margin-left:1px}
sup.k a{color:var(--erik);text-decoration:none}
sup.k a:hover{text-decoration:underline}
.btnlar{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px var(--f-bas);padding:14px 22px;border-radius:99px;text-decoration:none;border:1.5px solid var(--murekkep);background:var(--murekkep);color:#fff;transition:transform .2s}
.btn.acik{background:#fff;color:var(--murekkep)}
.btn:hover{transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--erik);outline-offset:3px}

/* hero */
.hero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;padding-block:56px 40px}
.hero .metin-k{grid-column:1/7}
.hero h1{margin:22px 0 22px}
.mercek{grid-column:7/13;position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--nane)}
.mercek>img.f{width:100%;height:100%;object-fit:cover}
.mercek::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);pointer-events:none}
@media(max-width:900px){.hero{padding-top:28px}.hero .metin-k,.mercek{grid-column:1/13}.mercek{order:-1;max-width:min(320px,70vw);width:100%;margin-inline:auto 0}}

/* sayfa başı (alt sayfalar) */
.sayfa-bas{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;padding-block:64px 48px;border-bottom:1px solid var(--cizgi)}
.sayfa-bas figure{position:relative}
.sayfa-bas figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
@media(max-width:900px){.sayfa-bas{grid-template-columns:1fr;gap:28px;padding-block:40px 32px}}
.kirinti{font:400 12px var(--f-mono);color:var(--soluk);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.kirinti a{text-decoration:none}.kirinti a:hover{color:var(--erik)}

/* bölümler */
.bolum{padding-block:88px}
.bolum.krem{background:var(--krem)}
.bolum.nane{background:var(--nane)}
.bolum-bas{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:44px}
.bolum-bas p{color:var(--metin)}
@media(max-width:860px){.bolum{padding-block:60px}.bolum-bas{grid-template-columns:1fr;gap:16px}}

/* veri şeridi */
.veriler{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--murekkep)}
.veri{padding:26px 22px 24px 0;border-right:1px solid var(--cizgi)}
.veri+.veri{padding-left:22px}.veri:last-child{border-right:0}
.veri b{display:block;font:700 clamp(38px,4.2vw,58px)/1 var(--f-bas);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.veri span{display:block;margin-top:12px;font-size:15px;color:var(--metin)}
.veri em{display:block;margin-top:12px;font:normal 400 11.5px var(--f-mono);color:var(--soluk)}
@media(max-width:860px){.veriler{grid-template-columns:1fr 1fr}.veri{border-bottom:1px solid var(--cizgi)}.veri:nth-child(2n){border-right:0}.veri:nth-child(2n+1){padding-left:0}.veri:nth-child(2n){padding-left:18px}}

/* ızgaralar ve kartlar */
.izgara-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.izgara-2>*,.izgara-3>*,.izgara-4>*{min-width:0}
.izgara-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.izgara-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:980px){.izgara-4{grid-template-columns:1fr 1fr}.izgara-3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.izgara-2,.izgara-3,.izgara-4{grid-template-columns:1fr;gap:18px}}
.kart{border:1px solid var(--cizgi);border-radius:18px;padding:26px;background:#fff;display:flex;flex-direction:column;gap:10px}
.kart small{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--erik)}
.kart p{font-size:15.5px;color:var(--metin)}
.kart .kaynak{margin-top:auto;padding-top:10px;font:400 11.5px var(--f-mono);color:var(--soluk)}
.kart.foto{padding:0;overflow:hidden}
.kart.foto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.kart.foto div{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}
a.kart{text-decoration:none;transition:border-color .2s,transform .2s}
a.kart:hover{border-color:var(--erik);transform:translateY(-3px)}

/* levha (şekil) */
.levha img{width:100%;aspect-ratio:4/3;border-radius:18px;object-fit:cover}
.levha figcaption{display:flex;justify-content:space-between;gap:16px;font:400 12px var(--f-mono);color:var(--soluk);padding-top:10px;border-top:1px solid var(--cizgi);margin-top:12px}

/* liste */
.madde{list-style:none;display:flex;flex-direction:column}
.madde li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--cizgi)}
.madde li:last-child{border-bottom:1px solid var(--cizgi)}
.madde li>span{font:500 13px var(--f-mono);color:var(--erik);padding-top:3px}
.madde li b{display:block;font-weight:600;margin-bottom:4px}

/* tablo */
.tablo-kap{overflow-x:auto;border:1px solid var(--cizgi);border-radius:16px}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--cizgi);vertical-align:top}
th{font:500 11.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soluk);background:var(--krem)}
tr:last-child td{border-bottom:0}
td.sayi{font-variant-numeric:tabular-nums;font-weight:600}
td i{font-style:italic}

/* bakteri satırı */
.bakteriler{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--murekkep)}
.bak{padding:20px 16px 0 0;border-right:1px solid var(--cizgi)}.bak+.bak{padding-left:16px}.bak:last-child{border:0}
.bak small{font:400 11px var(--f-mono);color:var(--soluk)}
.bak b{display:block;font:500 20px/1.2 var(--f-bas);font-style:italic;margin:6px 0;letter-spacing:-.02em}
.bak p{font-size:14.5px;color:var(--metin)}
@media(max-width:900px){.bakteriler{grid-template-columns:1fr 1fr}.bak{padding:18px 12px 18px 0;border-bottom:1px solid var(--cizgi)}.bak+.bak{padding-left:0}}

/* ürün kutusu */
.urun{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;border:1px solid var(--cizgi);border-radius:24px;padding:36px;background:#fff}
.urun img{width:100%;max-height:520px;object-fit:contain}
@media(max-width:860px){.urun{grid-template-columns:1fr;padding:22px}}

/* SSS */
details{border-top:1px solid var(--cizgi);padding:20px 0}
details:last-of-type{border-bottom:1px solid var(--cizgi)}
summary{list-style:none;font:600 19px var(--f-bas);letter-spacing:-.02em;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:400 26px var(--f-mono);color:var(--erik);line-height:1}
details[open] summary::after{content:'–'}
details p{margin-top:12px;color:var(--metin)}

/* literatür */
.kaynakca{list-style:none;counter-reset:none}
.kaynakca li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--cizgi);scroll-margin-top:90px}
.kaynakca li:target{background:var(--erik-acik)}
.kaynakca .no{font:500 14px var(--f-mono);color:var(--erik)}
.kaynakca .bas{font-weight:600}
.kaynakca .der{font:400 13px var(--f-mono);color:var(--soluk);margin-top:4px}
.kaynakca .bul{margin-top:8px;font-size:15.5px;color:var(--metin)}
.kaynakca .ne{margin-top:6px;font-size:14.5px;color:var(--erik)}
.kaynakca a{color:var(--erik)}

/* alt bilgi */
.alt{border-top:1px solid var(--murekkep);padding-block:56px 40px;margin-top:0}
.alt .izgara{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.alt h4{font:500 11.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);margin-bottom:14px}
.alt ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.alt a{text-decoration:none}.alt a:hover{color:var(--erik)}
.alt .not{font:400 12px var(--f-mono);color:var(--soluk);margin-top:40px;padding-top:20px;border-top:1px solid var(--cizgi);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:860px){.alt .izgara{grid-template-columns:1fr 1fr}}

/* görünme animasyonu */
.gor{opacity:1;transform:none;transition:opacity .7s,transform .7s}

@media(prefers-reduced-motion:reduce){.js .gor:not(.var){opacity:1;transform:none}html{scroll-behavior:auto}}
@media(max-width:520px){.marka small{display:none}}