/* NotaKora kabuk — çatı marka, ürün sayfaları ve giriş sayfaları için ortak bileşenler.
   Renk ve yazı ölçeği /assets/style.css :root'undan gelir (sayfalarda birlikte linklenir). */

.kb-sayfa{overflow-wrap:anywhere}
.kb-sar{max-width:1240px;margin-inline:auto;padding-inline:var(--ic)}
.kb-sayfa :is(a,summary,button,input):focus-visible{outline:3px solid var(--vurgu);outline-offset:3px}

/* ---------- üst ---------- */
.kb-ust{position:sticky;top:0;z-index:10;background:rgba(250,248,244,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--cizgi-2)}
.kb-ust-ic{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem 1rem;padding-block:.8rem}
.kb-marka{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);font-size:1.4rem;line-height:1.1;letter-spacing:-.02em;color:var(--murekkep)}
.kb-marka img{flex:none}
.kb-marka small{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--soluk);margin-top:.2rem}
.kb-menu{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:0 1.15rem}
.kb-menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--murekkep-2);font-size:.875rem}
.kb-menu a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:5px}
.kb-menu .kb-menu-giris{border:1px solid var(--cizgi);border-radius:999px;padding:0 .95rem;color:var(--murekkep)}
.kb-menu .kb-menu-giris:hover{background:var(--vurgu-alan);color:var(--vurgu-koyu);text-decoration:none}

/* ---------- giriş bloğu ---------- */
.kb-giris{padding-block:clamp(2.75rem,6vw,5.5rem);background:radial-gradient(ellipse at 78% 0%,var(--vurgu-alan-2),transparent 62%)}
.kb-giris h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.03;letter-spacing:-.032em;max-width:24ch;font-variation-settings:"opsz" 60}
.kb-kas{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soluk);margin-bottom:1.15rem}
.kb-alt{margin-top:1.5rem;max-width:60ch;color:var(--murekkep-2);font-size:var(--giris);line-height:1.6}
.kb-kitle{margin-block:1.6rem;padding-block:.9rem;border-block:1px solid var(--cizgi);color:var(--murekkep-2);font-size:.9rem;max-width:66ch}
.kb-dugme{display:inline-flex;align-items:center;min-height:48px;padding:0 1.5rem;border-radius:999px;background:var(--murekkep);color:var(--kagit);font-weight:500;font-size:1rem;text-decoration:none;box-shadow:0 1px 2px rgba(20,26,31,.18),0 18px 34px -18px rgba(20,26,31,.55);transition:background .2s ease,transform .2s ease}
.kb-dugme:hover{background:var(--vurgu-koyu);transform:translateY(-2px)}
.kb-not{margin-top:1.1rem;color:var(--soluk);font-size:.875rem;line-height:1.6;max-width:60ch}

/* ---------- bannerlar ---------- */
.kb-bolum{padding-block:clamp(2.75rem,6vw,5.5rem)}
.kb-bolum h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.95rem,3.4vw,3rem);line-height:1.07;letter-spacing:-.026em;max-width:30ch;margin-bottom:1.5rem}
.kb-bolum h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.2;margin-bottom:.6rem}
.kb-onsoz{color:var(--murekkep-2);max-width:64ch;margin-bottom:2rem}
.kb-bannerler{display:grid;gap:clamp(1rem,2.2vw,1.6rem)}
.kb-banner{position:relative;display:grid;gap:1.05rem;padding:clamp(1.4rem,3.2vw,2.4rem);border:1px solid var(--cizgi);border-radius:var(--yaricap);background:var(--kagit);box-shadow:var(--golge);text-decoration:none;color:inherit;transition:transform .22s ease,box-shadow .22s ease}
.kb-banner:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(20,26,31,.08),0 30px 50px -30px rgba(20,26,31,.5)}
.kb-banner h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.04;letter-spacing:-.028em;margin:0;max-width:26ch}
.kb-banner p{color:var(--murekkep-2);max-width:54ch}
.kb-banner-ust{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.kb-etiket{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:500;padding:.4rem .85rem;border-radius:999px;background:var(--vurgu-alan);color:var(--vurgu-koyu);border:1px solid rgba(15,93,87,.16)}
.kb-etiket span{width:7px;height:7px;border-radius:50%;background:var(--vurgu);flex:none}
.kb-etiket--beklemede{background:var(--uyari-zemin);color:var(--uyari);border-color:rgba(117,81,0,.2)}
.kb-etiket--beklemede span{background:var(--uyari)}
.kb-etiket--plan{background:transparent;color:var(--soluk);border-color:var(--cizgi)}
.kb-etiket--plan span{background:var(--soluk)}
.kb-banner-veri{font-family:var(--mono);font-size:.76rem;letter-spacing:-.01em;color:var(--soluk)}
.kb-banner-alt{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:auto;padding-top:.35rem}
.kb-cta{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.35rem;border-radius:999px;background:var(--murekkep);color:var(--kagit);font-weight:500;font-size:.98rem;text-decoration:none;white-space:nowrap}
.kb-cta:hover{background:var(--vurgu-koyu)}
.kb-ikh{font-size:.92rem;color:var(--murekkep-2);text-decoration:none;border-bottom:1px solid var(--cizgi);padding-bottom:.15rem;display:inline-flex;align-items:center;min-height:44px}
.kb-ikh:hover{color:var(--vurgu);border-color:var(--vurgu)}
/* klinik banner: koyu zemin */
.kb-banner--klinik{background:var(--murekkep);border-color:transparent;color:var(--kagit)}
.kb-banner--klinik h3{color:var(--kagit)}
.kb-banner--klinik p{color:rgba(250,248,244,.78)}
.kb-banner--klinik .kb-banner-veri{color:rgba(250,248,244,.6)}
.kb-banner--klinik .kb-etiket{background:rgba(250,248,244,.12);color:var(--kagit);border-color:rgba(250,248,244,.28)}
.kb-banner--klinik .kb-etiket span{background:var(--kagit)}
.kb-banner--klinik .kb-cta{background:var(--kagit);color:var(--murekkep)}
.kb-banner--klinik .kb-cta:hover{background:var(--kagit-2);color:var(--vurgu-koyu)}
.kb-banner--klinik .kb-ikh{color:rgba(250,248,244,.85);border-color:rgba(250,248,244,.3)}
.kb-banner--klinik .kb-ikh:hover{color:var(--kagit);border-color:var(--kagit)}
/* eğitim banner: vurgulu kâğıt */
.kb-banner--egitim{background:linear-gradient(180deg,var(--kagit) 0%,var(--vurgu-alan) 100%)}

/* planlanan ürünler */
.kb-planlar{display:grid;gap:.6rem;margin-top:1.75rem;border-top:1px solid var(--cizgi);padding-top:1.5rem}
.kb-plan{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem 1rem;align-items:start}
.kb-plan h3{font-size:1.05rem;margin:0}
.kb-plan p{color:var(--murekkep-2);font-size:.9rem;grid-column:2}

/* ---------- kartlar / durum ---------- */
.kb-kartlar{display:grid;gap:1rem}
.kb-kart{padding:1.35rem 1.45rem;border:1px solid var(--cizgi-2);border-radius:var(--yaricap);background:var(--kagit)}
.kb-kart h3{margin-bottom:.5rem}
.kb-kart p{color:var(--murekkep-2)}
.kb-liste{display:grid;gap:.7rem}
.kb-liste li{display:grid;gap:.25rem;padding:1rem 1.2rem;border-left:3px solid var(--vurgu);background:var(--kagit)}
.kb-liste strong{font-weight:600}
.kb-liste span{color:var(--murekkep-2);font-size:.92rem}

/* ---------- giriş sayfası ---------- */
.kb-giris-sayfa{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(ellipse at 50% 0%,var(--vurgu-alan-2),transparent 60%)}
.kb-giris-orta{display:grid;place-items:center;padding-block:clamp(2rem,5vw,4rem)}
.kb-kutu{width:100%;max-width:440px;padding:clamp(1.6rem,4vw,2.5rem);border:1px solid var(--cizgi);border-radius:var(--yaricap);background:var(--kagit);box-shadow:var(--golge)}
.kb-kutu h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.025em;margin:1rem 0 .4rem}
.kb-kutu .kb-urun{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vurgu-koyu)}
.kb-kutu p{color:var(--murekkep-2);font-size:.95rem}
.kb-form{display:grid;gap:1rem;margin-top:1.6rem}
.kb-alan{display:grid;gap:.4rem}
.kb-alan label{font-size:.85rem;color:var(--murekkep-2)}
.kb-alan input{min-height:48px;padding:.6rem .85rem;font:inherit;color:var(--murekkep);background:var(--kagit-2);border:1px solid var(--cizgi);border-radius:10px}
.kb-alan input:focus{border-color:var(--vurgu);background:var(--kagit)}
.kb-form button{min-height:48px;border:0;border-radius:999px;background:var(--murekkep);color:var(--kagit);font:inherit;font-weight:500;cursor:pointer}
.kb-form button:hover{background:var(--vurgu-koyu)}
.kb-uyari{margin-top:1.2rem;padding:.9rem 1rem;border:1px solid rgba(117,81,0,.2);background:var(--uyari-zemin);color:var(--uyari);border-radius:10px;font-size:.875rem}
.kb-kutu .kb-alt-bag{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--cizgi-2)}
.kb-kutu .kb-alt-bag a{font-size:.875rem;color:var(--murekkep-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.kb-kutu .kb-alt-bag a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:4px}

/* ---------- alt ---------- */
.kb-alt-bilgi{padding-block:1.75rem;border-top:1px solid var(--cizgi-2)}
.kb-alt-ic{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.kb-alt-nav{display:flex;flex-wrap:wrap;gap:0 1.2rem}
.kb-alt-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--murekkep-2);font-size:.875rem}
.kb-alt-nav a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:5px}
.kb-alt .kb-not{width:100%;margin:0;font-size:.8rem}

@media (min-width:760px){
  .kb-kartlar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kb-plan{grid-template-columns:auto minmax(0,1fr)}
}
@media (min-width:900px){
  /* ürün bannerları YAN YANA (kullanıcı talebi 08.10.2026) */
  .kb-bannerler{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-banner{padding:clamp(1.35rem,2.1vw,2rem)}
  .kb-banner h3{font-size:clamp(1.55rem,1.95vw,2.1rem);max-width:20ch}
  .kb-banner p{font-size:.97rem;max-width:44ch}
  .kb-planlar{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.6rem}
  .kb-plan{grid-template-columns:1fr}
  .kb-plan p{grid-column:1}
}
@media (min-width:1000px){
  .kb-ust-ic{grid-template-columns:auto minmax(0,1fr) auto;gap:2rem}
  .kb-menu{grid-column:2;grid-row:1;justify-content:center;gap:1.4rem}
  .kb-alt-nav{margin-left:auto}
}