/* ==========================================================================
   notebookservisi.net — BLOK GRUBU "giris": hero · sayfa-hero · guven · sayilar
   Görsel kaynak: _proje/konseptler/b/index.html (hero + trust). Token'lar temel.css'ten.
   Renkler bağlamsal --renk-* ile: koyu/pastel zeminde kendiliğinden uyum sağlar.
   ========================================================================== */

/* ==========================================================
   HERO (ana sayfa) — B'nin hero'su
   ========================================================== */
.bolum.hero {
  --hero-vurgu: var(--c-powder);
  padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;                      /* çizimdeki süzülen etiketler yatay taşma üretmesin */
}
.bolum--pudra.hero, .bolum--pudra.sayfa-hero { --hero-vurgu: var(--c-powder-deep); }
.bolum--koyu.hero, .bolum--koyu.sayfa-hero { --hero-vurgu: var(--c-brand-soft); }

.hero__izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.hero__yazi { min-width: 0; }

.hero__ust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--ls-etiket); text-transform: uppercase; color: var(--renk-vurgu);
}
.hero__ust-nokta { width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--c-powder-deep); }

.hero__baslik { font-size: var(--fs-h1); font-weight: 300; letter-spacing: -.03em; line-height: 1.02; max-width: 14ch; }

/* başlıkta **vurgu** → italik + pudra alt vurgu (satır kırılsa da her satırda sürer) */
.hero__baslik strong, .sayfa-hero__baslik strong {
  font-style: italic; font-weight: 300;
  padding-inline: .06em; margin-inline: -.06em; border-radius: 4px;
  background-image: linear-gradient(to bottom, transparent 58%, var(--hero-vurgu) 58%, var(--hero-vurgu) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.hero__giris { display: grid; gap: .75em; margin-top: var(--s-4); max-width: 50ch; font-size: var(--fs-lg); line-height: 1.55; color: var(--renk-soluk); }
.hero__butonlar { margin-top: var(--s-5); }

.hero__rozetler { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-4) 0 0; padding: 0; list-style: none; }

.hero__cizim { position: relative; justify-self: center; width: 100%; max-width: 560px; min-width: 0; }
.hero__cizim svg { overflow: visible; }

@media (min-width: 960px) {
  .hero__izgara { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-6); }
  .hero--cizimsiz .hero__izgara { grid-template-columns: minmax(0, 1fr); }
  .hero--cizimsiz .hero__baslik { max-width: 18ch; }
}
@media (max-width: 959px) {
  .hero__baslik { max-width: 16ch; }
  .hero__cizim { max-width: 440px; }
}
@media (max-width: 479px) {
  .hero__izgara { gap: var(--s-6); }
  .hero__rozetler .rozet { font-size: .75rem; padding: .375rem .75rem; }
}

/* ==========================================================
   SAYFA-HERO (iç sayfa başlığı) — hero'nun alçak kardeşi
   ========================================================== */
.bolum.sayfa-hero {
  --hero-vurgu: var(--c-powder);
  padding-block: var(--s-3) clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
  overflow: hidden;
}
.sayfa-hero__ekmek { margin-bottom: clamp(1rem, .5rem + 2vw, 2.5rem); }

.sayfa-hero__izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.sayfa-hero__yazi { min-width: 0; }
.sayfa-hero__ust { margin: 0 0 var(--s-3); }
.sayfa-hero__baslik {
  font-size: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);      /* h1 ölçeğinin bir kademe altı: uzun iç sayfa başlıkları için */
  font-weight: 300; letter-spacing: -.025em; line-height: 1.05; max-width: 20ch;
  overflow-wrap: break-word;
}
.sayfa-hero__giris { display: grid; gap: .75em; margin-top: var(--s-4); max-width: 58ch; font-size: var(--fs-lg); line-height: 1.55; color: var(--renk-soluk); }
.sayfa-hero__giris strong { color: var(--renk-metin); }
.sayfa-hero__butonlar { margin-top: var(--s-5); }

.sayfa-hero__cizim { justify-self: center; width: 100%; max-width: 260px; min-width: 0; }

@media (min-width: 600px) {
  .sayfa-hero__cizim { max-width: 320px; }
}
@media (min-width: 960px) {
  .sayfa-hero__izgara { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--s-8); }
  .sayfa-hero__cizim { max-width: 420px; justify-self: end; }
  .sayfa-hero--cizimsiz .sayfa-hero__izgara { grid-template-columns: minmax(0, 1fr); }
  .sayfa-hero--cizimsiz .sayfa-hero__baslik { max-width: 24ch; }
}

/* ==========================================================
   GÜVEN ŞERİDİ — B'nin "trust" bandı
   ========================================================== */
.bolum.guven { padding-block: 0; }
/* şerit boşluksuz olduğundan, aynı zeminli sonraki bölümün üst boşluğu geri verilir */
.guven + .bolum { padding-top: var(--s-section); }
.guven + .bolum--siki { padding-top: calc(var(--s-section) * .6); }
/* güven şeridinin ardından farklı renkte (ör. koyu) bir bölüm geliyorsa şerit alttan nefes alsın */
.bolum.guven:has(+ .bolum--koyu), .bolum.guven:has(+ .bolum--sis), .bolum.guven:has(+ .bolum--kum), .bolum.guven:has(+ .bolum--adacayi), .bolum.guven:has(+ .bolum--pudra) { padding-bottom: calc(var(--s-section) * .55); }

.guven__cerceve { border-block: 1px solid var(--renk-cizgi-guclu); overflow: hidden; }
/* iç çizgiler: her öğe sağ + alt çizgi taşır, liste 1px dışarı taşıp çerçevede kırpılır → öğe sayısından bağımsız */
.guven__liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 -1px -1px 0; padding: 0; list-style: none;
}
.guven__oge {
  position: relative; display: grid; gap: 2px; align-content: start; justify-items: start;
  min-width: 0; padding: var(--s-3) var(--s-2);
  border-right: 1px solid var(--renk-cizgi); border-bottom: 1px solid var(--renk-cizgi);
}
.guven__oge:nth-child(odd) { padding-left: 0; }
.guven__deger {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem;
  font-family: var(--f-serif); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.1;
  font-variant-numeric: lining-nums; color: var(--renk-baslik);
}
.guven__deger .guven__yildiz { width: .8em; height: .8em; color: var(--c-star); }
.bolum--koyu .guven__yildiz { color: var(--c-sand-deep); }
.guven__birim { font-size: .7em; font-style: italic; }
.guven__etiket { font-size: var(--fs-sm); line-height: 1.4; color: var(--renk-soluk); }

/* Google öğesi: bağlantı tüm hücreyi kaplar (≥44px dokunma hedefi) */
.guven__bag { display: inline-flex; align-items: center; gap: .25rem; text-decoration: none; transition: color var(--t-fast); }
.guven__bag::after { content: ""; position: absolute; inset: 0; }
.guven__bag .ikon { width: 14px; height: 14px; flex: none; opacity: .6; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.guven__bag:hover, .guven__bag:focus-visible { color: var(--renk-vurgu); text-decoration: underline; text-underline-offset: .2em; }
.guven__bag:hover .ikon { transform: translateX(3px); opacity: 1; }
.guven__bag:focus-visible { outline: none; }
.guven__bag:focus-visible::after { outline: 3px solid var(--renk-odak); outline-offset: -3px; border-radius: 6px; }

.guven__cip { margin-top: var(--s-1); }

@media (min-width: 860px) {
  .guven__liste { grid-template-columns: repeat(var(--adet, 4), minmax(0, 1fr)); }
  .guven__oge, .guven__oge:nth-child(odd) { padding: var(--s-4); }
  .guven__oge:first-child { padding-left: 0; }
}

/* ==========================================================
   SAYILAR — büyük Fraunces rakamlar
   ========================================================== */
.sayilar__liste {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-3);
  border-top: 1px solid var(--renk-cizgi-guclu);
}
.sayilar__oge { min-width: 0; padding-top: var(--s-4); display: grid; gap: var(--s-1); align-content: start; }
.sayilar__deger {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; margin: 0;
  font-family: var(--f-serif); color: var(--renk-baslik);
}
.sayilar__rakam {
  font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); font-weight: 300; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: lining-nums;
}
.sayilar__birim { font-size: var(--fs-h3); font-style: italic; font-weight: 400; line-height: 1.1; color: var(--renk-vurgu); }
.sayilar__etiket { margin: 0; max-width: 24ch; font-size: var(--fs-sm); line-height: 1.45; color: var(--renk-soluk); }

@media (min-width: 860px) {
  .sayilar__liste { grid-template-columns: repeat(var(--adet, 4), minmax(0, 1fr)); gap: var(--s-6); }
  .sayilar__oge { padding-top: var(--s-5); }
  /* sütunlar arası ince dikey çizgi (editoryal) */
  .sayilar__oge + .sayilar__oge { position: relative; }
  .sayilar__oge + .sayilar__oge:not(:nth-child(4n+1))::before {
    content: ""; position: absolute; left: calc(var(--s-6) / -2); top: var(--s-5); bottom: 0; width: 1px; background: var(--renk-cizgi);
  }
}
@media (max-width: 339px) {
  .sayilar__liste, .guven__liste { grid-template-columns: minmax(0, 1fr); }
  .guven__oge { padding-left: 0; }
}

@media print {
  .hero__cizim, .sayfa-hero__cizim { display: none; }
  .bolum.hero, .bolum.sayfa-hero { padding-block: var(--s-3); }
}