/* Bölüm kütüphanesinden derlendi (_tema/araclar/bolumler.py) — elle DÜZENLEME: kaynak _tema/bolumler/<ad>/bolum.css
   Bu sitede: panjur, lomboz-meyve, pist, otuz, pencere, acilan-akis */

/* ═════ Bölüm kütüphanesi · ortak temel (2026-10-02/03) ═════
   Kütüphane bölümlerinin (efsane, tabak, gün, mevsim, SSS, etiket, açlık, tuz, 30 bitki, tarifler…) ortak sınıfları.
   İKİ KATMAN KURALI (her bölümde): temel = DURAĞAN, okunur yerleşim (JS yoksa / "hareketi azalt" açıksa her şey
   görünür); kaydırmalı sahne yerleşimi yalnız `html.w-mod-js` + `prefers-reduced-motion: no-preference` altında
   (w-mod-js <head>'de eklenir → ilk boyamadan önce belli; JS sonradan yerleşim değiştirmez). Sahneler CSS sticky
   + ScrollTrigger scrub (GSAP pin YOK), sahne boyu 100svh. Siteye `_tema/araclar/bolumler.py` derler. */
/* yazı tipi kökte: sitenin gövde yazı tipi Webflow varsayılanı (Arial) — yalnız p/başlık sınıfları Figtree; bölüm içindeki
   span/div/li/td/svg metni Arial'a düşüyordu (2026-10-03 düzeltildi) */
.yb { position: relative; z-index: 3; background-color: var(--bej); overflow-x: clip; font-family: Figtree, Arial, sans-serif; }
.yb-kap { padding: 0 var(--bosluk-masaustu); }
.yb-ust { display: flex; align-items: center; gap: 1.6em; }
.yb-ust-yazi { color: var(--baslik-rengi); white-space: nowrap; }
.yb-ust-cizgi { flex: 1; height: 1px; background-color: var(--baslik-rengi); opacity: .35; transform-origin: left center; }
.yb-ust-sag { color: var(--baslik-rengi); white-space: nowrap; }   /* Hakkımda gibi ikinci etiket (kurumsal beşli, 2026-10-09) */
.yb-baslik { margin: 0; }
/* başlık satır maskesi (SplitText, 23-yb-ortak.js): satır kutusu yazının 0.93'ü — ğ/ş/ç kuyrukları ve şapkalar taşar →
   maske üstte .12em, altta .22em uzar (eşit eksi kenar boşluğu: yerleşim aynı); yükselme %140 (uzayan maskeden sızmasın) */
.yb-satir-ic-mask { padding: .12em 0 .22em; margin: -.12em 0 -.22em; }
/* alt alta iki maskenin eksi kenar boşlukları toplanmaz, büyüğü kazanır (2026-10-28 ölçüldü: satır başına +.12em; bölme geri
   alınınca alttaki satırlar ve sonraki içerik o kadar yukarı sıçrıyordu) → ardında maske olan maskenin altı iki payı birden alır,
   sonrakinin üstü 0: blok, flex ve ızgara kabında aynı */
.yb-satir-ic-mask:has(+ .yb-satir-ic-mask) { margin-bottom: -.34em; }
.yb-satir-ic-mask + .yb-satir-ic-mask { margin-top: 0; }
/* SplitText bölünmüşken dengeleme yok (2026-10-28; _ortak.js başındaki yama yazar, bölme geri alınınca kaldırır): Safari text-wrap:
   balance'ı kelime kutularında yanlış hesaplayıp bölünmüş başlığı kelime kelime alt alta diziyordu. Doğal satır sonları <br>'le sabit. */
.yb-bol-dogal, .yb-bol-dogal * { text-wrap-style: auto !important; }
.yb-metin { margin: 0; max-width: 30em; color: var(--yesil-ana); font-size: 1.15em; line-height: 1.5; }
.yb-dugme { display: inline-flex; align-self: flex-start; }
@media screen and (max-width: 767px) {
  .yb-kap { padding: 0 var(--bosluk-mobil); }
  .yb-ust { gap: 1em; }
  .yb-metin { font-size: 1.02em; }
}
.yb-koyu { background-color: #232b17; }
.yb-koyu .yb-ust-yazi { color: #c9cca6; }
.yb-koyu .yb-ust-cizgi { background-color: #c9cca6; }
.yb-koyu .yb-ust-sag { color: #c9cca6; }
/* menü / alt bilgi bağlantısı bu sitede olmayan bir bölüme gidiyorsa (bolumler.py data-bolum-yok yazar) görünmez (2026-10-10) */
a[data-bolum-yok] { display: none !important; }

/* ═════ İkinci ana sürümden taşınan bölümler (95–106: serit … kemer, 2026-10-15) ═════
   Kökte `.yb .yb2`. İkinci sürümün temel.css'indeki değişkenler, sıfırlamalar, yazı ölçeği (t-*), etiket satırı ve hap düğme (.kps)
   burada bölüm kapsamında: birinci sürüm sitesinde (Webflow tabanı: gövde satır yüksekliği 20 px, h/p/ul/figure kenar boşlukları, img
   inline-block, mavi bağlantı) eksik olanı verir, ikinci sürüm sitesinde temel.css'tekiyle aynı değerdedir. Sınıf kuralları
   :where(.yb2) ile → özgüllük ikinci sürümdekiyle aynı (bölümün kendi kuralı sonra gelir, ezer); sıfırlamalar (0,0,1) özgüllükte →
   Webflow'un h2/p/img kurallarını sırayla ezer. Bölüm betikleri YB.s2'yi kullanır (yb-ortak.js). */
.yb2 { --kum: #ebe1d5; --kagit: #faf6f1; --zeytin: #596a33; --yaprak-1: #465626; --yaprak-2: #75864e; --yaprak-3: #a1ac67; --cam: #3d4b18;
  --koyu: #232b17; --gece: #171d0e; --adacayi: #c9cca6; --cizgi-koyu: rgba(64, 79, 29, .22); --cizgi-acik: rgba(244, 237, 230, .24);
  --bosluk: var(--bosluk-masaustu, 1.88em); --tepe-boy: 5.2em; --yaricap: 1.1em; --yumusak: cubic-bezier(.16, 1, .3, 1);
  color: var(--yesil-ana); line-height: 1.4; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 767px) { .yb2 { --bosluk: var(--bosluk-mobil, 1em); --tepe-boy: 4.4em; --yaricap: .9em; } }
:where(.yb2), :where(.yb2) *, :where(.yb2) *::before, :where(.yb2) *::after { box-sizing: border-box; }
/* Webflow tabanı h1–h6/p/li/a'ya renk, yazı tipi, boy ve satır yüksekliği veriyor (p 1,13em + yeşil, h2 2,5em + zeytin…); ikinci
   sürümde bunlar kalıtılır (h: tarayıcı varsayılanı) → aynı sonuç için geri alınır */
:where(.yb2) :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: inherit; font-family: inherit; font-size: revert; line-height: revert;
  font-weight: revert; letter-spacing: revert; }
:where(.yb2) :is(p, li, blockquote, figcaption, label) { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
:where(.yb2) :is(p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.yb2) blockquote { padding: 0; border: 0; }
:where(.yb2) figcaption { margin: 0; text-align: inherit; }
:where(.yb2) :is(ul, ol) { padding: 0; list-style: none; }
:where(.yb2) a { color: inherit; text-decoration: none; }
:where(.yb2) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
:where(.yb2) :is(img, video, canvas, svg) { display: block; max-width: 100%; }
:where(.yb2) img { height: auto; vertical-align: baseline; }
:where(.yb2) .kap { padding-left: var(--bosluk); padding-right: var(--bosluk); }
:where(.yb2) .bolunmez { white-space: nowrap; }
:where(.yb2) .ekran-okur { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* yazı ölçeği (ikinci sürüm) ──
   dev: açılıştaki ad · buyuk: sahne başlıkları · baslik: bölüm başlığı (h2) · ara: ara başlık · govde · kucuk · etiket (büyük harf) */
:where(.yb2) .t-dev { font-size: 9.4em; font-weight: 400; letter-spacing: -.045em; line-height: .92; }
:where(.yb2) .t-buyuk { font-size: 6.2em; font-weight: 400; letter-spacing: -.04em; line-height: .98; }
:where(.yb2) .t-baslik { font-size: 3.75em; font-weight: 500; letter-spacing: -.025em; line-height: 1.04; }
:where(.yb2) .t-ara { font-size: 2.1em; font-weight: 500; letter-spacing: -.018em; line-height: 1.14; }
:where(.yb2) .t-govde { font-size: 1.15em; line-height: 1.5; }
:where(.yb2) .t-kucuk { font-size: .95em; line-height: 1.45; }
:where(.yb2) .t-etiket { font-size: .9em; line-height: 1.2; text-transform: uppercase; letter-spacing: .015em; }
:where(.yb2) .t-sayi { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:where(.yb2) .t-baslik, :where(.yb2) .t-ara, :where(.yb2) .t-buyuk, :where(.yb2) .t-dev { text-wrap: balance; }
:where(.yb2) .renk-baslik { color: var(--baslik-rengi); }
:where(.yb2) .renk-krem { color: var(--bej); }
@media screen and (max-width: 991px) {
  :where(.yb2) .t-dev { font-size: 6.4em; }
  :where(.yb2) .t-buyuk { font-size: 4.6em; }
  :where(.yb2) .t-baslik { font-size: 3em; }
  :where(.yb2) .t-ara { font-size: 1.8em; }
}
@media screen and (max-width: 767px) {
  :where(.yb2) .t-dev { font-size: 3.4em; letter-spacing: -.04em; line-height: .96; }
  :where(.yb2) .t-buyuk { font-size: 2.7em; letter-spacing: -.035em; line-height: 1; }
  :where(.yb2) .t-baslik { font-size: 1.95em; line-height: 1.08; }
  :where(.yb2) .t-ara { font-size: 1.4em; line-height: 1.18; }
  :where(.yb2) .t-govde { font-size: 1em; }
  :where(.yb2) .t-kucuk { font-size: .9em; }
  :where(.yb2) .t-etiket { font-size: .8em; }
}
/* satır maskesi (SplitText mask: lines): Figtree'de ç/ğ/ş/y kuyrukları ve şapkalar satır kutusundan taşar → maske üstte .12em,
   altta .24em uzar, eşit eksi kenar boşluğuyla yerleşim aynı kalır; yükselme %130–140 */
:where(.yb2) .yb2-satir-mask { padding: .12em 0 .24em; margin: -.12em 0 -.24em; }
/* alt alta iki maskenin eksi kenar boşlukları toplanmaz, büyüğü kazanır (2026-10-28 ölçüldü, telefonda pist başlığı: satır başına +.12em; bölme geri
   alınınca alttaki satırlar ve sonraki içerik o kadar yukarı sıçrıyordu) → ardında maske olan maskenin altı iki payı birden alır,
   sonrakinin üstü 0: blok, flex ve ızgara kabında aynı */
:where(.yb2) .yb2-satir-mask:has(+ .yb2-satir-mask) { margin-bottom: -.36em; }
:where(.yb2) .yb2-satir-mask + .yb2-satir-mask { margin-top: 0; }
/* ── etiket satırı: küçük büyük harfli yazı + uzayan ince çizgi + sağ etiket ── */
:where(.yb2) .etiket-satir { display: flex; align-items: center; gap: 1.4em; }
:where(.yb2) .etiket-satir-cizgi { flex: 1; height: 1px; background-color: currentColor; opacity: .3; transform-origin: left center; }
@media screen and (max-width: 767px) {
  :where(.yb2) .etiket-satir { gap: 1em; }
}
/* ── düğme: hap biçimi, yazı üstten alta yuvarlanır, sağda okun dairesi büyür ──
   <a class="kps kps-koyu" data-randevu href="#randevu"><span class="kps-yazi"><span>Randevu al</span><span aria-hidden="true">Randevu al</span></span>
   <span class="kps-ok" aria-hidden="true"><svg viewBox="0 0 16 16"><path d="M3 8h9.5M8.5 4l4 4-4 4"/></svg></span></a> */
:where(.yb2) .kps { position: relative; display: inline-flex; align-items: center; gap: .9em; padding: .42em .42em .42em 1.35em; border-radius: 99em;
  font-size: .92em; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  isolation: isolate; transition: background-color .35s, color .35s; }
:where(.yb2) .kps-yazi { display: grid; overflow: hidden; height: 1.15em; }
:where(.yb2) .kps-yazi > span { grid-area: 1 / 1; display: block; line-height: 1.15em; transition: transform .55s var(--yumusak); }
:where(.yb2) .kps-yazi > span + span { transform: translateY(105%); }
:where(.yb2) .kps-ok { position: relative; display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: 50%; flex: none; }
:where(.yb2) .kps-ok::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: currentColor; opacity: .14;
  transition: transform .55s var(--yumusak), opacity .35s; }
:where(.yb2) .kps-ok svg { position: relative; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .55s var(--yumusak); }
@media (hover: hover) {
  :where(.yb2) .kps:hover .kps-yazi > span:first-child { transform: translateY(-105%); }
  :where(.yb2) .kps:hover .kps-yazi > span + span { transform: translateY(0); }
  :where(.yb2) .kps:hover .kps-ok::before { transform: scale(1.12); opacity: .24; }
  :where(.yb2) .kps:hover .kps-ok svg { transform: translateX(.18em); }
}
:where(.yb2) .kps-koyu { background-color: var(--baslik-rengi); color: var(--bej); }
:where(.yb2) .kps-koyu:hover { background-color: var(--yesil-ana); }
:where(.yb2) .kps-acik { background-color: var(--bej); color: var(--yesil-ana); }
:where(.yb2) .kps-acik:hover { background-color: #fff; }
:where(.yb2) .kps-cam { background-color: rgba(255, 255, 255, .1); color: var(--bej); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
:where(.yb2) .kps-cam:hover { background-color: rgba(255, 255, 255, .18); }
:where(.yb2) .kps-cizgi { color: var(--yesil-ana); box-shadow: inset 0 0 0 1px var(--cizgi-koyu); }
:where(.yb2) .kps-cizgi:hover { background-color: rgba(64, 79, 29, .06); }

/* ═════ Üçüncü ana sürümden taşınan bölümler (107–119: yorunge … tutulma, 2026-10-15) ═════
   Kökte `.yb .yb3`. Üçüncü sürümün (projects/basediyet3) ana.css'indeki değişkenler, sıfırlamalar, yazı ölçeği (y-*), etiket (nokta-etiket),
   düğme (.dd: daire → kapsül), mühür (.muhur: dönen dairesel yazı), dairesel yazı (.halka-yazi) ve satır maskesi burada bölüm kapsamında:
   birinci ve ikinci sürüm sitesinde eksik olanı verir. Sınıf kuralları :where(.yb3) ile → özgüllük üçüncü sürümdekiyle aynı (bölümün kendi
   kuralı sonra gelir, ezer); sıfırlamalar (0,0,1) → birinci sürüm tabanının h/p/img kurallarını sırayla ezer (.yb2'deki ders). Bölüm betikleri YB.s3'ü
   kullanır (yb-ortak.js). Üst çubuk payı --cubuk-boy (sitede --tepe-boy varsa o), yan boşluk --kenar (sitenin --bosluk-masaustu/-mobil'i). */
.yb3 { --kum: #ebe1d5; --kagit: #faf6f1; --zeytin: #596a33; --yaprak-1: #465626; --yaprak-2: #75864e; --yaprak-3: #a1ac67; --cam: #3d4b18;
  --koyu: #232b17; --gece: #171d0e; --adacayi: #c9cca6; --cizgi-koyu: rgba(64, 79, 29, .22); --cizgi-acik: rgba(244, 237, 230, .24);
  --kenar: var(--bosluk-masaustu, 2.1em); --cubuk-boy: var(--tepe-boy, 5.6em); --yumusak: cubic-bezier(.16, 1, .3, 1);
  --yay: cubic-bezier(.65, 0, .35, 1);
  color: var(--yesil-ana); line-height: 1.4; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width: 767px) { .yb3 { --kenar: var(--bosluk-mobil, 1.1em); --cubuk-boy: var(--tepe-boy, 4.6em); } }
:where(.yb3), :where(.yb3) *, :where(.yb3) *::before, :where(.yb3) *::after { box-sizing: border-box; }
:where(.yb3) :is(h1, h2, h3, h4, h5, h6) { margin: 0; color: inherit; font-family: inherit; font-size: revert; line-height: revert;
  font-weight: revert; letter-spacing: revert; }
:where(.yb3) :is(p, li, blockquote, figcaption, label) { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }
:where(.yb3) :is(p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.yb3) blockquote { padding: 0; border: 0; }
:where(.yb3) figcaption { margin: 0; text-align: inherit; }
:where(.yb3) :is(ul, ol) { padding: 0; list-style: none; }
:where(.yb3) a { color: inherit; text-decoration: none; }
:where(.yb3) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
:where(.yb3) :is(img, video, canvas, svg) { display: block; max-width: 100%; }
:where(.yb3) img { height: auto; vertical-align: baseline; }
:where(.yb3) .kenar { padding-left: var(--kenar); padding-right: var(--kenar); }
:where(.yb3) .bolunmez { white-space: nowrap; }
:where(.yb3) .ekran-okur { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* yazı ölçeği (üçüncü sürüm; birinci sürümle aynı oranlar) */
:where(.yb3) .y-dev { font-size: 9.4em; font-weight: 400; letter-spacing: -.045em; line-height: .92; }
:where(.yb3) .y-buyuk { font-size: 6.2em; font-weight: 400; letter-spacing: -.04em; line-height: .98; }
:where(.yb3) .y-baslik { font-size: 3.75em; font-weight: 500; letter-spacing: -.025em; line-height: 1.04; }
:where(.yb3) .y-ara { font-size: 2.1em; font-weight: 500; letter-spacing: -.018em; line-height: 1.14; }
:where(.yb3) .y-govde { font-size: 1.15em; line-height: 1.5; }
:where(.yb3) .y-kucuk { font-size: .95em; line-height: 1.45; }
:where(.yb3) .y-etiket { font-size: .86em; line-height: 1.2; text-transform: uppercase; letter-spacing: .06em; }
:where(.yb3) .y-sayi { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:where(.yb3) :is(.y-baslik, .y-ara, .y-buyuk, .y-dev) { text-wrap: balance; }
@media screen and (max-width: 991px) {
  :where(.yb3) .y-dev { font-size: 6.4em; }
  :where(.yb3) .y-buyuk { font-size: 4.6em; }
  :where(.yb3) .y-baslik { font-size: 3em; }
  :where(.yb3) .y-ara { font-size: 1.8em; }
}
@media screen and (max-width: 767px) {
  :where(.yb3) .y-dev { font-size: 3.4em; letter-spacing: -.04em; line-height: .96; }
  :where(.yb3) .y-buyuk { font-size: 2.7em; letter-spacing: -.035em; line-height: 1; }
  :where(.yb3) .y-baslik { font-size: 1.95em; line-height: 1.08; }
  :where(.yb3) .y-ara { font-size: 1.4em; line-height: 1.18; }
  :where(.yb3) .y-govde { font-size: 1em; }
  :where(.yb3) .y-kucuk { font-size: .9em; }
  :where(.yb3) .y-etiket { font-size: .78em; }
}
/* satır maskesi (YB.s3.satirlar: linesClass 'yb3-sat'; kuyruk ve şapka payı) */
:where(.yb3) .yb3-sat-mask { padding: .12em 0 .24em; margin: -.12em 0 -.24em; }
/* alt alta iki maskenin eksi kenar boşlukları toplanmaz, büyüğü kazanır (2026-10-28 ölçüldü: satır başına +.12em; bölme geri
   alınınca alttaki satırlar ve sonraki içerik o kadar yukarı sıçrıyordu) → ardında maske olan maskenin altı iki payı birden alır,
   sonrakinin üstü 0: blok, flex ve ızgara kabında aynı */
:where(.yb3) .yb3-sat-mask:has(+ .yb3-sat-mask) { margin-bottom: -.36em; }
:where(.yb3) .yb3-sat-mask + .yb3-sat-mask { margin-top: 0; }
/* etiket: önünde küçük dolu daire */
:where(.yb3) .nokta-etiket { display: inline-flex; align-items: center; gap: .7em; font-size: .86em; line-height: 1.2; text-transform: uppercase;
  letter-spacing: .06em; }
:where(.yb3) .nokta-etiket-nokta { flex: none; width: .55em; height: .55em; border-radius: 50%; background-color: currentColor; }
@media screen and (max-width: 767px) { :where(.yb3) .nokta-etiket { font-size: .78em; } }
/* düğme: daire → kapsül (durağan: dolu daire + yazı + ince kapsül çizgisi; üzerine gelince daire yazının arkasına uzar) */
:where(.yb3) .dd { --dd-zemin: var(--yesil-ana); --dd-ok: var(--bej); --dd-yazi: var(--yesil-ana); --dd-yazi-ust: var(--bej);
  position: relative; display: inline-flex; align-items: center; gap: .8em; height: 3.1em; padding-right: 1.45em; border-radius: 99em;
  font-size: .9em; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  color: var(--dd-yazi); isolation: isolate; }
:where(.yb3) .dd::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 3.1em; border-radius: 99em;
  background-color: var(--dd-zemin); transition: width .75s var(--yumusak), background-color .45s; }
:where(.yb3) .dd::after { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: 99em; box-shadow: inset 0 0 0 1px currentColor;
  opacity: .28; transition: opacity .4s; }
:where(.yb3) .dd-daire { position: relative; display: grid; place-items: center; width: 3.1em; height: 3.1em; flex: none; color: var(--dd-ok);
  transition: color .45s; }
:where(.yb3) .dd-daire svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .6s var(--yumusak); }
:where(.yb3) .dd-yazi { transition: color .45s; }
@media (hover: hover) {
  :where(.yb3) .dd:hover::before { width: 100%; }
  :where(.yb3) .dd:hover::after { opacity: 0; }
  :where(.yb3) .dd:hover .dd-yazi { color: var(--dd-yazi-ust); }
  :where(.yb3) .dd:hover .dd-daire svg { transform: rotate(-45deg); }
}
:where(.yb3) .dd:focus-visible::before { width: 100%; }
:where(.yb3) .dd:focus-visible .dd-yazi { color: var(--dd-yazi-ust); }
:where(.yb3) .dd-acik { --dd-zemin: var(--bej); --dd-ok: var(--yesil-ana); --dd-yazi: var(--bej); --dd-yazi-ust: var(--yesil-ana); }
:where(.yb3) .dd-kucuk { font-size: .8em; }
/* mühür: dönen dairesel yazı, ortada ok */
:where(.yb3) .muhur { --muhur-ic: var(--bej); --muhur-ok: var(--yesil-ana);
  position: relative; display: grid; place-items: center; width: 9.4em; height: 9.4em; border-radius: 50%; color: var(--bej); flex: none; }
:where(.yb3) .muhur-koyu { --muhur-ic: var(--yesil-ana); --muhur-ok: var(--bej); color: var(--yesil-ana); }
:where(.yb3) .muhur-halka { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:where(.yb3) :where(.muhur-halka, .halka-yazi) text { fill: currentColor; font-weight: 500; letter-spacing: .12em; }
:where(.yb3) :where(.muhur-halka, .halka-yazi) text:not([font-size]) { font-size: 9.2px; }
:where(.yb3) .muhur-ic { position: relative; display: grid; place-items: center; width: 42%; height: 42%; border-radius: 50%;
  background-color: var(--muhur-ic); color: var(--muhur-ok); transition: transform .7s var(--yumusak); }
:where(.yb3) .muhur-ic svg { width: 32%; height: 32%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round; transition: transform .7s var(--yumusak); }
@media (hover: hover) {
  :where(.yb3) .muhur:hover .muhur-ic { transform: scale(1.14); }
  :where(.yb3) .muhur:hover .muhur-ic svg { transform: rotate(-45deg); }
}
@keyframes yb3-don { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js :where(.yb3) .muhur-halka { animation: yb3-don 26s linear infinite; }
  html.w-mod-js :where(.yb3) .muhur:hover .muhur-halka { animation-duration: 9s; }
}
/* dairesel yazı (YB.s3.halkaYazi kurar) */
:where(.yb3) .halka-yazi { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* birinci sürüm sitesinin temel stilindeki normalize svg:not(:root) { overflow: hidden } (0,1,1) yukarıdaki tek sınıflı kuralları ezer → yazının
   halkadan taşan ucu kesilir; yalnız overflow, aynı özgüllükte (sonra gelir) */
:where(.yb3) :is(svg.muhur-halka, svg.halka-yazi) { overflow: visible; }

/* ── kütüphane: panjur (2026-10-15) — ikinci ana sürümün (basediyet2) #hakkimda bölümünden taşındı (CSS).
   Adlar: kimlik #s-panjur, kök .panjur, önek pj- (ikinci sürümde hk-). Kütüphane farkları: _uretec/19-surum2-bolumleri.py
   başı (iki katman: html.w-mod-js + prefers-reduced-motion; betik YB.s2). Aşağıdaki açıklama ikinci sürümdekinin aynısı. ── */
/* ── bölüm: hakkimda (önek pj-) · Hakkımda (krem, 2026-10-15) ──
   Masaüstünde iki sütun: solda yapışkan portre (yumuşak köşeli çerçeve; girişte beş dikey panjur sırayla yukarı/aşağı kayıp portreyi
   açar, portre yakından uzaklaşır; kaydırınca çerçevenin içinde hafifçe kayar), altında "Dinle · Ölç · Uyarla"; sağda başlık, iki
   paragraf, üç ilke, randevu. Kaydırınca ilkeler sırayla öne çıkar (diğerleri soluklaşır, numara dairesi dolar) ve portrenin
   altındaki karşılık kelimenin altına çizgi kayar. degisim'den sonra gelirse zeytin şeritli perdenin arkasından açılır.
   DURAĞAN: hepsi yerinde, panjur yok, ilkeler tam renk. Telefon/tablet: alt alta, yapışkan yok. */
.panjur { background-color: var(--bej); color: var(--yesil-ana); }
.pj-kap { display: grid; gap: 3.2em; padding-top: 7em; padding-bottom: 8em; }
.pj-ust { color: var(--baslik-rengi); }
.pj-izgara { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); gap: 5.5em; align-items: start; }
.pj-sol { min-width: 0; }
.pj-portre { display: grid; gap: 1.1em; justify-items: start; }
.pj-foto { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--yaricap); overflow: hidden; background-color: var(--kum); }
.pj-foto-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.pj-panjur { display: none; }
.pj-alt-yazi { position: relative; display: flex; align-items: center; gap: .65em; padding-bottom: .55em; color: var(--baslik-rengi); }
.pj-kelime { transition: color .5s; }
.pj-nokta { opacity: .5; }
.pj-isaret { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: var(--yesil-ana);
  transition: transform .75s var(--yumusak), width .75s var(--yumusak); }
.pj-sag { display: grid; gap: 2.6em; min-width: 0; padding-top: .6em; }
.pj-baslik { color: var(--baslik-rengi); }
.pj-metin { display: grid; gap: 1.1em; max-width: 34em; }
.pj-ilkeler { border-top: 1px solid var(--cizgi-koyu); }
.pj-ilke { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); gap: .8em; padding: 1.9em 0; border-bottom: 1px solid var(--cizgi-koyu);
  transition: opacity .6s; }
.pj-ilke-no { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; color: var(--baslik-rengi);
  box-shadow: inset 0 0 0 1px var(--cizgi-koyu); transition: background-color .5s, color .5s, box-shadow .5s; }
.pj-ilke-govde { display: grid; gap: .5em; }
.pj-ilke-baslik { color: var(--baslik-rengi); }
.pj-ilke-govde p { max-width: 30em; }
.pj-ilke.etkin .pj-ilke-no { background-color: var(--baslik-rengi); color: var(--bej); box-shadow: inset 0 0 0 1px var(--baslik-rengi); }
.pj-ilkeler.odak .pj-ilke:not(.etkin) { opacity: .34; }
.pj-kelime.etkin { color: var(--yesil-ana); }
@media screen and (max-width: 991px) {
  .pj-izgara { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 3em; }
}
@media screen and (max-width: 767px) {
  .pj-kap { gap: 2.2em; padding-top: 4.5em; padding-bottom: 5em; }
  .pj-ust { flex-wrap: wrap; row-gap: .4em; }
  .pj-izgara { grid-template-columns: minmax(0, 1fr); gap: 2.4em; }
  .pj-foto { width: min(100%, 24em); }
  .pj-sag { gap: 2em; padding-top: 0; }
  .pj-ilke { grid-template-columns: 3.4em minmax(0, 1fr); padding: 1.5em 0; }
}

/* ── SAHNE ── panjur (giriş) her boyda; yapışkan portre yalnız masaüstünde */
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pj-panjur { position: absolute; inset: 0; display: flex; pointer-events: none; }
  html.w-mod-js .pj-panjur i { flex: 1; margin-right: -1px; background-color: var(--bej); }
}
@media screen and (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pj-sol { position: sticky; top: 13vh; top: 13svh; }
  html.w-mod-js .pj-foto { width: min(100%, 58vh); width: min(100%, 58svh); }
  html.w-mod-js .pj-sag { padding-bottom: 12vh; padding-bottom: 12svh; }
  html.w-mod-js .pj-ilke { padding: 2.6em 0; }
}

/* ── kütüphane: lomboz-meyve (2026-10-18) — lomboz'un (111) birinci sürümdeki hâli. Kullanıcı: "çilek düşerken gelen oval, içeriden
   dışarı büyüyen çizgileri kaldıralım; %5 kısmına çilekle ilgili kaynaklı, bilimsel bir bilgi; çilek sonuna ulaşınca yazılar kaybolarak
   diğer section'a geçelim, üç baloncuğu kaldıralım". Adlar: kimlik #s-lomboz-meyve, kök .lomboz-meyve, önek lmv- (lomboz'da lmb-; %5
   bloğu lmb-bes → lmv-bilgi). lomboz'dan farkı: değme halkaları (lmb-halkalar) ve hava kabarcıkları yok; gösterge %80 (meyve bilgisi);
   dizi bitince yazılar söner ve bölüm biter (sonda koyulaşma yok); yapışkan süre 400 → 285svh + 25svh çıkış: ekran dalis'teki (99) gibi
   yeniden kart olur (yan ve üst/alt boşluk, köşe), krem zeminde yukarı kalkar (kullanıcı 2026-10-18). Soru (2026-10-18 akşam, kullanıcı:
   "oraya uymuyor, daha doğru bir şey — çilek açılıyor, yolculuğa var mısın benimle gibi ama sofistike, diyetle alakalı"): "Her rengin
   bir bilimi var. Derine inelim mi?" (ardından "Kırmızının içindekiler").
   Krem zeminde soru; altında yuvarlak lomboz (çift zeytin halkalı daire pencere) sitenin düşüş dizisinin ilk karesini gösterir.
   Kaydırınca lomboz büyüyüp ekranı doldurur, dizi oynar (meyve düşer); tam ekran suda dev halkanın %80'lik yayı çizilir, ortada %80
   sayılır, yanında meyve bilgisi + düğme; meyve dibe ulaşınca hepsi söner. Durağan: soru, yuvarlak kare, bilgi bloğu alt alta. */
.lomboz-meyve { background-color: var(--bej); color: var(--yesil-ana); }
.lmv-sahne { display: grid; justify-items: center; gap: 3.4em; padding: 8em 0; }
.lmv-soru { width: 100%; text-align: center; }
.lmv-soru-bas { max-width: 15em; margin: 0 auto; color: var(--baslik-rengi); }
.lmv-soru-bas > span { display: block; }   /* iki cümle iki satırda (dar ekranda her biri kendi içinde kırılır) */
.lmv-lomboz { position: relative; width: min(64vw, 30em); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background-color: #3a3b1d; }
.lmv-afis { width: 100%; height: 100%; object-fit: cover; }
.lmv-tuval, .lmv-karart, .lmv-cerceve { display: none; }
.lmv-bilgi { display: grid; grid-template-columns: auto minmax(0, 32em); align-items: center; gap: 3em; }
.lmv-gosterge { position: relative; display: grid; place-items: center; width: min(60vw, 17em); aspect-ratio: 1; color: var(--baslik-rengi); }
.lmv-gosterge-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.lmv-g-iz { fill: none; stroke: currentColor; stroke-opacity: .2; stroke-width: 1.4; }
.lmv-g-yay { fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linecap: round; stroke-dasharray: 80 100; }
.lmv-yuzde { display: flex; align-items: baseline; gap: .04em; line-height: 1; }
.lmv-yuzde-isaret { font-size: 2.6em; font-weight: 300; }
.lmv-yuzde-sayi { font-size: 7.4em; font-weight: 400; letter-spacing: -.04em; }
.lmv-bilgi-bas { color: var(--baslik-rengi); }
.lmv-bilgi-p { max-width: 30em; margin-top: 1em; }
.lmv-bilgi-dugme { margin-top: 1.8em; }
@media screen and (max-width: 767px) {
  .lmv-sahne { padding: 5.5em 0; gap: 2.6em; }
  .lmv-bilgi { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 2em; }
  .lmv-bilgi-metin { display: grid; justify-items: center; }
}

/* ── hareketli katman: yapışkan sahne (410svh = 100 + 285 içerik + 25 çıkış) ── */
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .lomboz-meyve { height: 410vh; height: 410svh; }
  /* sahne BÜYÜK görünüm boyunda (2026-10-28, kullanıcı telefonda: "çilek videosunun altında yeşil arka plan rengi alan var, scroll'da
     titreşiyor"): 100svh iken iPhone'da aşağı kaydırınca tarayıcı çubuğu küçülüp görünür alan büyüyor, sahnenin altında ~80–100 px'lik
     şerit açılıp kökün zemini (suyun yeşili) görünüyordu; çubuk her açılıp kapanışta şerit de gidip geliyordu. Görsel katmanlar (dizi,
     lomboz, karartma) artık hep tam ekran; yazılar telefonda küçük görünüm boyunda kalır (aşağıda .lmv-bilgi) — çubuk açıkken altta kalmasın. */
  html.w-mod-js .lmv-sahne { position: sticky; top: 0; display: block; height: 100vh; height: 100lvh; padding: 0; overflow: hidden; }
  /* 2026-10-29: dokunmatikte sahne otururken betik position: fixed yazar (YB.sabitle, yb-ortak.js) — kullanıcının iPhone kaydında bu
     yapışkan sahnenin yazıları kaydırırken ±1,5 px titriyordu; 2026-10-28'de denenen will-change: transform titremeyi gidermedi, kaldırıldı. */
  /* soru: normal puntolu kap (--cubuk-boy em'i burada gövde puntosuyla çözülür) */
  html.w-mod-js .lmv-soru { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding-top: calc(var(--cubuk-boy) + 3.5vh);
  padding-top: calc(var(--cubuk-boy) + 3.5svh); pointer-events: none; }
  html.w-mod-js .lmv-soru-bas { font-size: min(4.3em, 6.8vh); font-size: min(4.3em, 6.8svh); }
  html.w-mod-js .lmv-lomboz { position: absolute; inset: 0; z-index: 1; width: auto; aspect-ratio: auto; border-radius: 0; clip-path: circle(0px at 50% 50%); }
  html.w-mod-js .lmv-afis { display: none; }
  html.w-mod-js .lmv-tuval { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  html.w-mod-js .lmv-karart { display: block; position: absolute; inset: 0; background-color: #232b17; opacity: 0; will-change: opacity; }
  html.w-mod-js .lmv-cerceve { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
}
.lmv-cerceve circle { fill: none; stroke: var(--baslik-rengi); }
.lmv-cerceve-a { stroke-width: 1.6; }
.lmv-cerceve-b { stroke-width: 1; stroke-opacity: .5; }
/* bilgi: suyun üstünde krem; tıklanacak yalnız düğme → isabet sınaması altındaki suyu bulsun */
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .lmv-bilgi { position: absolute; z-index: 4; left: 0; right: 0; top: 50%; color: var(--bej); transform: translateY(-50%);
  pointer-events: none; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1fr); gap: 2em; }
  /* meyve ortada kalsın: gösterge solda, metin sağda */
  html.w-mod-js .lmv-gosterge { grid-column: 1; justify-self: center; }
  html.w-mod-js .lmv-bilgi-metin { grid-column: 3; max-width: 26em; }
  html.w-mod-js .lmv-bilgi a { pointer-events: auto; }
  html.w-mod-js .lmv-gosterge { width: min(26em, 46vh, 30vw); width: min(26em, 46svh, 30vw); color: var(--bej); }
  html.w-mod-js .lmv-g-yay { stroke-dasharray: 0 100; }
  html.w-mod-js .lmv-g-iz { stroke-dasharray: 0 100; }
  html.w-mod-js .lmv-yuzde { font-size: min(1em, 1.85vh); font-size: min(1em, 1.85svh); }
  html.w-mod-js .lmv-yuzde-sayi { font-size: 11em; }
  html.w-mod-js .lmv-yuzde-isaret { font-size: 3.6em; }
  html.w-mod-js .lmv-bilgi-bas { color: var(--bej); font-size: min(3.75em, 7svh); }
  html.w-mod-js .lmv-bilgi-p { color: var(--adacayi); }
  html.w-mod-js .lmv-bilgi .dd { --dd-zemin: var(--bej); --dd-ok: var(--yesil-ana); --dd-yazi: var(--bej); --dd-yazi-ust: var(--yesil-ana); }
  html.w-mod-js .lmv-gosterge, html.w-mod-js .lmv-bilgi-metin { opacity: 0; }
}
@media screen and (max-width: 767px) {
  @media (prefers-reduced-motion: no-preference) {
    html.w-mod-js .lmv-soru-bas { font-size: min(2.25em, 5.2vh); font-size: min(2.25em, 5.2svh); max-width: 11em; }
  }
}
/* telefon ve dikey tablet: gösterge üstte, metin altta (meyve ortada) */
@media screen and (max-width: 767px), screen and (max-width: 991px) and (orientation: portrait) {
  @media (prefers-reduced-motion: no-preference) {
    html.w-mod-js .lmv-bilgi { top: 0; bottom: auto; height: 100vh; height: 100svh; display: flex; flex-direction: column;
    justify-content: space-between; align-items: center;
    gap: 1em; padding-top: calc(var(--cubuk-boy) + 2svh); padding-bottom: 5svh; transform: none; text-align: center; }
    html.w-mod-js .lmv-bilgi-metin { display: grid; justify-items: center; max-width: none; padding: 1.2em 0 0;
    background: radial-gradient(ellipse at 50% 70%, rgba(23, 29, 14, .66), rgba(23, 29, 14, 0) 72%); }
    html.w-mod-js .lmv-gosterge { width: min(56vw, 27svh); }
    html.w-mod-js .lmv-yuzde { font-size: min(.8em, 1.25svh); }
    html.w-mod-js .lmv-bilgi-bas { font-size: min(1.95em, 4.6svh); }
    html.w-mod-js .lmv-bilgi-p { font-size: min(1em, 2.1svh); }
    html.w-mod-js .lmv-bilgi-dugme { margin-top: 1.2em; }
  }
}
@media screen and (max-height: 520px) and (orientation: landscape) {
  @media (prefers-reduced-motion: no-preference) {
    html.w-mod-js .lmv-soru { padding-top: calc(var(--cubuk-boy) + 2svh); }
    html.w-mod-js .lmv-soru-bas { font-size: min(1.9em, 8svh); max-width: none; }
    html.w-mod-js .lmv-bilgi { grid-template-columns: auto minmax(0, 26em); gap: 2em; }
    html.w-mod-js .lmv-gosterge { width: 52svh; }
    html.w-mod-js .lmv-bilgi-bas { font-size: min(2em, 9svh); }
    html.w-mod-js .lmv-bilgi-p { font-size: min(1em, 4.2svh); }
  }
}
/* kütüphane: birinci sürüm sitesinin temel stilindeki normalize svg:not(:root) { overflow: hidden } (0,1,1) tek sınıflı
   kuralı ezer → yalnız overflow, aynı özgüllükte (sonra gelir) */
svg.lmv-gosterge-svg { overflow: visible; }

/* ── kütüphane: pist (2026-10-15) — ikinci ana sürümün (basediyet2) #oneriler bölümünden taşındı (CSS).
   Adlar: kimlik #s-pist, kök .pist, önek pt- (ikinci sürümde oneri-). Kütüphane farkları: _uretec/19-surum2-bolumleri.py
   başı (iki katman: html.w-mod-js + prefers-reduced-motion; betik YB.s2). Aşağıdaki açıklama ikinci sürümdekinin aynısı. ── */
/* ── 50 · oneriler: "Bilimsel temelli & Hayatın içinden" (2026-10-15) ──
   Birinci sürümde video tam ekrandan sol sütuna küçülür, sayılar sağda alt alta. Burada YATAY PİST: dikey kaydırma pisti sola iter —
   giriş paneli (başlık) → yuvarlak köşeli video paneli (içinde video ters yönde hafif kayar) → dört sayı paneli (paneli ekranın sağ
   kenarından içeri girerken sol çizgisi yukarıdan aşağı çizilir, sayı 0'dan değerine sayar: kaydırmanın saf işlevi, geri sarınca
   geri sayar) → kaynak satırı. Altta ince ilerleme çizgisi. Pist yolu JS'te ölçülür (--pt-yol), bölüm boyu 100svh + yol.
   Telefonda, yatay kısa ekranda (yükseklik < 560) ve hareketi azaltta akış düzeni: başlık, video, sayılar alt alta (sayılar
   ekrana girince bir kez sayar). */
.pist { background-color: var(--bej); color: var(--yesil-ana); }
.pt-sahne { position: relative; padding: 7.5em 0 6em; }
.pt-pist { display: grid; gap: 3.4em; }
.pt-giris { display: grid; gap: 2em; padding: 0 var(--bosluk); }
.pt-etiket { color: var(--baslik-rengi); max-width: 34em; }
.pt-baslik { color: var(--baslik-rengi); }
.pt-baslik > span { display: block; }
.pt-ipucu { display: none; }
.pt-video { position: relative; margin: 0 var(--bosluk); aspect-ratio: 16 / 9; border-radius: var(--yaricap); overflow: hidden;
  background-color: #8ea0b3; }
.pt-video-ic { position: absolute; inset: 0; }
.pt-video video { width: 100%; height: 100%; object-fit: cover; }
.pt-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 var(--bosluk); border-top: 1px solid var(--cizgi-koyu); }
.pt-sayi { position: relative; display: grid; align-content: start; gap: 1em; padding: 1.6em 1.6em 1.8em; }
.pt-sayi + .pt-sayi { border-left: 1px solid var(--cizgi-koyu); }
.pt-no { color: var(--baslik-rengi); opacity: .7; }
.pt-deger { display: flex; align-items: baseline; gap: .18em; color: var(--baslik-rengi); font-size: 5.6em; font-weight: 400;
  letter-spacing: -.05em; line-height: .9; white-space: nowrap; }
.pt-birim { font-size: .36em; letter-spacing: -.01em; }
.pt-aciklama { max-width: 15em; color: var(--yesil-ana); }
.pt-kaynak { grid-column: 1 / -1; max-width: 46em; margin-top: 1.2em; color: var(--baslik-rengi); }   /* 04'ün içinde, tam genişlik */
.pt-ilerleme { display: none; }

@media screen and (max-width: 991px) {
  .pt-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-sayi:nth-child(3) { border-left: 0; }
  .pt-sayi:nth-child(n + 3) { border-top: 1px solid var(--cizgi-koyu); }
}
@media screen and (max-width: 767px) {
  .pt-sahne { padding: 4.6em 0 4em; }
  .pt-pist { gap: 2.4em; }
  .pt-giris { gap: 1.2em; }
  .pt-video { aspect-ratio: 4 / 3; }
  .pt-sayilar { grid-template-columns: minmax(0, 1fr); }
  .pt-sayi { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: .3em 1.2em; padding: 1.3em 0 1.2em; }
  .pt-sayi + .pt-sayi { border-left: 0; border-top: 1px solid var(--cizgi-koyu); }
  .pt-no { grid-column: 1 / -1; }
  .pt-deger { font-size: 3.6em; }
  .pt-aciklama { padding-bottom: .35em; font-size: .95em; }
}

/* ── sahne: yatay pist (tablet ve masaüstü, yükseklik ≥ 560) ── */
@media screen and (min-width: 768px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pist { height: calc(100vh + var(--pt-yol, 220vw)); height: calc(100svh + var(--pt-yol, 220vw)); }
  html.w-mod-js .pt-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden;
    font-size: min(1em, 1.95svh); }
  html.w-mod-js .pt-pist { position: relative; display: flex; align-items: stretch; gap: 0; width: max-content; height: 100%;
    padding: calc(var(--tepe-boy) + 2.4em) var(--bosluk) 5.4em; will-change: transform; }
  html.w-mod-js .pt-giris { flex: none; width: 60em; padding: 0 4em 0 0; grid-template-rows: auto 1fr auto; align-content: stretch; gap: 0; }
  html.w-mod-js .pt-baslik { align-self: center; }
  html.w-mod-js .pt-ipucu { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--cizgi-koyu); color: var(--baslik-rengi); }
  html.w-mod-js .pt-ipucu svg { width: 2em; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
    stroke-linejoin: round; animation: pt-ipucu 1.8s var(--yumusak) infinite; }
  html.w-mod-js .pt-video { flex: none; width: 38em; height: auto; aspect-ratio: auto; margin: 0 5em 0 0; border-radius: 1.6em; }
  html.w-mod-js .pt-video-ic { left: -12%; right: -12%; }
  html.w-mod-js .pt-sayilar { display: flex; margin: 0; border: 0; }
  html.w-mod-js .pt-sayi { flex: none; width: 31em; padding: 0 2.6em; border: 0; align-content: center; gap: 1.5em; }
  html.w-mod-js .pt-no { position: absolute; top: 0; left: 2.6em; }
  html.w-mod-js .pt-sayi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background-color: var(--cizgi-koyu);
    transform: scaleY(var(--pt-c, 0)); transform-origin: top center; }
  html.w-mod-js .pt-deger { font-size: 9.4em; }
  html.w-mod-js .pt-no, html.w-mod-js .pt-aciklama { opacity: calc(.15 + .85 * var(--pt-t, 0)); }
  html.w-mod-js .pt-aciklama { max-width: 13em; font-size: 1.35em; line-height: 1.38; color: var(--baslik-rengi); }
  /* kaynak satırı 04 panelinin altında (2026-10-18, kullanıcı: "04'ün altına koy, kaynaklar için sayfa sağa doğru uzamasın") */
  html.w-mod-js .pt-kaynak { position: absolute; left: 2.6em; right: 2.6em; bottom: 0; max-width: 22em; padding: 0; border: 0; }
  html.w-mod-js .pt-ilerleme { display: block; position: absolute; left: var(--bosluk); right: var(--bosluk); bottom: 2.2em; height: 1px;
    background-color: var(--cizgi-koyu); }
  html.w-mod-js .pt-ilerleme span { position: absolute; inset: 0; background-color: var(--baslik-rengi); transform: scaleX(0); transform-origin: left center; }
}
@media screen and (min-width: 768px) and (max-width: 991px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pt-giris { width: 44em; }
  html.w-mod-js .pt-video { width: 34em; }
  html.w-mod-js .pt-sayi { width: 28em; }
  html.w-mod-js .pt-deger { font-size: 8em; }
}
@keyframes pt-ipucu { 0% { transform: translateX(-.4em); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(.5em); opacity: 0; } }
/* akışta (telefon, kısa ekran) video geçerken üst çubuğun altına girer: tepesi gökyüzü (açık) → hafif koyu degrade, üst çubuk
   açık yazıyla okunur (figure data-ust="acik", data-durum: degradeli tepenin ortalama rengi). Yatay pistte panel üst çubuğun altında. */
@media screen and (max-width: 767px), screen and (max-height: 559px) {
  .pt-video::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 42%; pointer-events: none;
    background: linear-gradient(180deg, rgba(23, 29, 14, .5) 0%, rgba(23, 29, 14, 0) 100%); }
}

/* ── bölüm: otuz · Haftada 30 farklı bitki ── */
/* ── 9 · Haftada 30 farklı bitki ── */
.otuz { padding: 9em 0 10em; }
.otuz-sahne { position: relative; }
.otuz-tuval, .otuz-alt-yazi { display: none; }
.otuz-bas { display: flex; flex-direction: column; gap: 1.6em; max-width: 36em; }
.otuz-ic { display: flex; flex-direction: column; align-items: center; gap: 1.3em; padding: 3.5em var(--bosluk-masaustu) 0; text-align: center; }
.otuz-bulgu { margin: 0; max-width: 23em; color: var(--baslik-rengi); font-size: 2.1em; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.otuz-kaynak { color: var(--baslik-rengi); opacity: .7; }
.otuz-turler { list-style: none; margin: .8em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 14em)); gap: 1.2em 2.4em; text-align: left; }
.otuz-tur { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); column-gap: .6em; row-gap: .15em; }
.otuz-tur-nokta { grid-row: span 2; width: .8em; height: .8em; margin-top: .3em; border-radius: 50%; background-color: var(--tur-renk); }
.otuz-tur b { color: var(--baslik-rengi); font-weight: 600; }
.otuz-tur span:last-child { color: var(--yesil-ana); opacity: .8; font-size: .92em; }
.otuz-tur-sebze { --tur-renk: #5f7a35; }
.otuz-tur-meyve { --tur-renk: #c0533a; }
.otuz-tur-baklagil { --tur-renk: #d29a3a; }
.otuz-tur-tahil { --tur-renk: #b8894f; }
.otuz-tur-kuruyemis { --tur-renk: #7a5236; }
.otuz-tur-ot { --tur-renk: #8aa25a; }
.otuz-ipucu { margin: .6em 0 0; max-width: 34em; color: var(--yesil-ana); font-size: 1.05em; line-height: 1.5; }
@media screen and (max-width: 767px) {
  .otuz { padding: 6em 0 7em; }
  .otuz-ic { padding: 2.4em var(--bosluk-mobil) 0; }
  .otuz-bulgu { font-size: 1.45em; }
  .otuz-turler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 1.4em; }
  .otuz-ipucu { font-size: .95em; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 30 bitki: tuval tüm sahnede; iç içerik sahnenin ortasında, "0"ın içinden geçince görünür */
  html.w-mod-js .otuz { padding: 0; height: 290vh; }
  html.w-mod-js .otuz-sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  html.w-mod-js .otuz-tuval { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  html.w-mod-js .otuz-bas { position: relative; z-index: 2; padding-top: 15svh; }
  html.w-mod-js .otuz-alt-yazi { display: block; position: absolute; z-index: 2; left: 0; top: 0; color: var(--baslik-rengi); white-space: nowrap;
    opacity: 0; transform: translateX(-50%); }
  html.w-mod-js .otuz-ic { position: absolute; z-index: 3; inset: 0; justify-content: center; padding: 10svh var(--bosluk-masaustu) 5svh;
    opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 991px) {
  html.w-mod-js .otuz-bas { padding-top: 11svh; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.w-mod-js .otuz-ic { padding: 9svh var(--bosluk-mobil) 4svh; gap: 1em; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) and (max-height: 720px) {
  html.w-mod-js .otuz-bas .yb-metin { display: none; }
  html.w-mod-js .otuz-ipucu { display: none; }
}

/* ── kütüphane: pencere (2026-10-17) — yarik'in (102) meyve penceresinden açılan hâli. Kullanıcı (birinci sürüm, kayan yazının yerine):
   "102 … açılış yine basedeki çilek gibi olsun ve içinden açılsın; yani gözden açılmayacak". Adlar: kimlik #s-pencere, kök .pencere,
   önek pnc-. Üç dev satır yarik'in aynısı; yarık + göz (elips clip-path) yerine sitenin meyve penceresi (assets/img/pencere-bahce.avif:
   tarla fotoğrafı, saydamlığı meyve biçiminde; 2026-10-29'a kadar birinci sürümün kayan yazı bölümündeki logo-new.avif) ortada belirip büyür, zemin kremden
   yeşile, satırlar kreme döner (sitenin özgün açılışındaki gibi), tarla pencerenin içinden belirir.
   2026-10-18 (kullanıcı: "çilekten sonra açılan alanı değiştirmeye gerek yoktu, eskisi gibi kalsın — açlık kilo vermenin bedeli
   olmak zorunda değil kısmı"): tarla bölümü birinci sürümün özgün tarla bölümünün AYNISI — ölçüler site.css'in .vitrin-* /
   .hizmet-avantaj kurallarından (masaüstü kare görsel, 104.2em kutu; ≤991 ekran boyu; ≤479 kartlar yan yana), yazı stili
   .baslik-2-yeni / .yazi-24-regular / .yazi-14-regular, telefonda karartma + gölge uyarlama.css'ten; zamanlama betikte (IX3'ün
   çizelgesi). Akış düzeni (betik yok / hareketi azalt / yükseklik < 520): başlık, görsel, cümle, kartlar alt alta. ── */
.pencere { background-color: var(--bej); color: var(--yesil-ana); }
.pnc-sahne { position: relative; display: grid; gap: 2.6em; padding: 7.5em var(--bosluk); }
.pnc-baslik { display: grid; color: var(--baslik-rengi); }
.pnc-baslik > span { display: block; }
.pnc-satirlar, .pnc-meyve { display: none; }
/* akış düzeni: görsel, cümle, kartlar */
.pnc-vitrin { display: grid; gap: 2.2em; }
.pnc-tarla { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--yaricap); background-color: #6e6a3c; }
.pnc-soz { max-width: 24em; color: var(--yesil-ana); font-size: 2.1em; font-weight: 500; letter-spacing: -.018em; line-height: 1.2; text-wrap: balance; }
.pnc-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; }
.pnc-kart { position: relative; display: grid; align-content: start; gap: .7em; padding: 1.9em 1.8em 2em; border-radius: 1.3em;
  background-color: var(--kum); }
.pnc-kart-baslik { order: 1; font-size: 1.4em; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; color: var(--baslik-rengi); }
.pnc-kart-ikon { order: 0; }
.pnc-kart-ikon img { display: block; width: 1.63em; height: auto; filter: brightness(0); opacity: .5; }
.pnc-kart-metin { order: 2; font-size: 1.02em; line-height: 1.5; }
@media screen and (max-width: 767px) {
  .pnc-sahne { padding: 4.6em var(--bosluk); gap: 2em; }
  .pnc-tarla { aspect-ratio: 4 / 3; }
  .pnc-soz { font-size: 1.4em; }
  .pnc-kartlar { grid-template-columns: minmax(0, 1fr); gap: .8em; }
  .pnc-kart { padding: 1.3em 1.2em 1.4em; }
}

/* ── sahne ── */
@media (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pencere { height: 410vh; height: 410svh; }   /* betik özgünün kaydırma uzunluğuna göre yeniden yazar */
  /* sahne BÜYÜK görünüm boyunda (2026-10-28, kullanıcı telefonda: "aç kalmadan yasaklamadan bilerek section'ında scroll yaparken çok
     titreme var"): 100svh iken iPhone'da tarayıcı çubuğu küçülünce sahnenin altında şerit açılıp kapanıyordu. Kartlar telefonda üste
     yaslı, satırlar ortada — çubuk açıkken altta kalan bir şey yok. Bölüm boyunu betik sahnenin boyundan yazar (BOY = SON + H). */
  html.w-mod-js .pnc-sahne { position: sticky; top: 0; display: block; height: 100vh; height: 100lvh; padding: 0; overflow: hidden; }
  /* 2026-10-29: dokunmatikte sahne otururken betik position: fixed yazar (YB.sabitle, yb-ortak.js) — kullanıcının iPhone kaydında satırlar
     kaydırırken ±1,5 px titriyordu; 2026-10-28'de denenen will-change: transform titremeyi gidermedi, kaldırıldı. */
  html.w-mod-js .pnc-baslik { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; }
  html.w-mod-js .pnc-satirlar { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .02em;
    font-size: min(9.4em, 14.5vh); font-size: min(9.4em, 14.5svh); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; }
  html.w-mod-js .pnc-satir { white-space: nowrap; }
  html.w-mod-js .pnc-iz { display: inline-flex; align-items: center; gap: .3em; will-change: transform; }
  html.w-mod-js .pnc-satir-1 { color: var(--baslik-rengi); }
  html.w-mod-js .pnc-satir-2 { color: transparent; -webkit-text-stroke: .016em var(--baslik-rengi); }
  html.w-mod-js .pnc-satir-3 { color: var(--yesil-ana); }
  html.w-mod-js .pnc-ayrac { flex: none; width: .13em; height: .13em; border-radius: 50%; background-color: var(--yesil-acik); }
  /* meyve penceresi: ortada sıfır boyutlu kap; görsel son boyuyla yerleşir (betik genişliği yazar), ölçekle küçülür — büyük yerleş,
     küçült (will-change yok: küçükken taranıp büyüyünce bulanıklaşmasın) */
  html.w-mod-js .pnc-meyve { position: absolute; left: 50%; top: 50%; display: block; width: 0; height: 0; pointer-events: none; }
  html.w-mod-js .pnc-meyve img { position: absolute; left: 0; top: 0; width: 133vw; max-width: none; height: auto;
    transform: translate(-50%, -50%) scale(.1); visibility: hidden; }
  /* tarla bölümü = özgündeki .vitrin-bolum: masaüstünde kare görsel (genişlik tam), kutu 104.2em; betik özgünün kaydırmasıyla
     yukarı kaydırır. 2026-10-29'dan beri görsel 16:9 (kullanıcının bahçesi, tarla-bahce.avif): kutuyu kaplar, yanları kırpılır —
     yerleşim ve zamanlama aynı */
  html.w-mod-js .pnc-vitrin { position: absolute; left: 0; top: 0; z-index: 3; display: block; width: 100%; height: 104.2em; min-height: 100%;
    opacity: 0; visibility: hidden; pointer-events: none; }
  html.w-mod-js .pnc-tarla { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: auto; min-height: 100%; aspect-ratio: auto;
    object-fit: cover; border-radius: 0; }
  html.w-mod-js .pnc-vitrin-baslik { position: relative; z-index: 4; width: 100%; padding-top: 8em; }
  html.w-mod-js .pnc-vitrin-baslik-ic { width: 53.87em; max-width: 100%; padding-left: 1.88em; }
  html.w-mod-js .pnc-soz { max-width: none; color: #f4ede6; font-size: 3.4em; font-weight: 400; letter-spacing: -.01em;
    -webkit-text-stroke-width: .01em; line-height: 93%; text-wrap: wrap; }
  html.w-mod-js .pnc-kartlar { position: absolute; inset: 0; z-index: 4; display: block; }
  html.w-mod-js .pnc-kart { position: absolute; display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start;
    gap: 0; width: 16.5em; height: 16.5em; padding: 1.5em; border-radius: 2em; background-color: rgba(122, 131, 95, .1);
    -webkit-backdrop-filter: blur(1em); backdrop-filter: blur(1em); }
  html.w-mod-js .pnc-kart-1 { top: 46.3em; right: 16em; }
  html.w-mod-js .pnc-kart-2 { bottom: 30em; left: 16em; }
  html.w-mod-js .pnc-kart-3 { bottom: 10em; right: 16em; }
  html.w-mod-js .pnc-kart-baslik { order: 0; margin: 0; color: #fff; font-size: 1.5em; font-weight: 400; letter-spacing: normal; line-height: 120%; }
  html.w-mod-js .pnc-kart-ikon { position: absolute; left: 0; right: 0; top: 7.3em; display: flex; justify-content: center; align-items: center; }
  html.w-mod-js .pnc-kart-ikon img { width: 1.63em; filter: none; opacity: .4; }
  html.w-mod-js .pnc-kart-metin { order: 1; color: #fff; font-size: .88em; line-height: 120%; opacity: .6; }
}
/* tablet ve telefon (≤991): kutu ekran boyu, görsel kaplar; kartlar 15em */
@media screen and (max-width: 991px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pnc-vitrin { height: 100%; }
  html.w-mod-js .pnc-tarla { height: 100%; }
  html.w-mod-js .pnc-vitrin-baslik { padding-top: 6em; }
  html.w-mod-js .pnc-vitrin-baslik-ic { width: 48em; }
  html.w-mod-js .pnc-soz { font-size: 3em; }
  html.w-mod-js .pnc-kart { width: 15em; height: 15em; }
  html.w-mod-js .pnc-kart-1, html.w-mod-js .pnc-kart-3 { right: 2em; }
  html.w-mod-js .pnc-kart-2 { bottom: 10em; left: 2em; }
  html.w-mod-js .pnc-kart-baslik { font-size: 1.4em; }
}
/* telefon (≤767): görselin üstüne karartma, yazılara gölge (sitenin "mobil okunurluk" kuralı) */
@media screen and (max-width: 767px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pnc-satirlar { font-size: min(3.6em, 8.6svh); }
  html.w-mod-js .pnc-vitrin::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, rgba(14, 20, 6, .66) 0%, rgba(14, 20, 6, .4) 45%, rgba(14, 20, 6, .52) 100%); }
  html.w-mod-js .pnc-vitrin-baslik, html.w-mod-js .pnc-kart {
    text-shadow: 0 1px 2px rgba(10, 14, 5, .4), 0 2px 16px rgba(10, 14, 5, .45); }
}
/* küçük telefon (≤479): kartlar üstte yan yana (betik sola kaydırır) */
@media screen and (max-width: 479px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  html.w-mod-js .pnc-vitrin-baslik-ic { width: 24.4em; padding-left: 1em; }
  html.w-mod-js .pnc-soz { font-size: 1.9em; line-height: 100%; }
  html.w-mod-js .pnc-kart { top: 5em; right: auto; bottom: auto; }
  html.w-mod-js .pnc-kart-1 { left: 1em; }
  html.w-mod-js .pnc-kart-2 { left: 17em; }
  html.w-mod-js .pnc-kart-3 { left: 33em; }
  html.w-mod-js .pnc-kart-baslik { font-size: 1.3em; }
}

/* ── kütüphane: acilan-akis (2026-10-19) — acilan'ın (105; basediyet2 #hizmetler) KAYDIRMASIZ hâli (CSS). Kullanıcı (birinci sürüm):
   "hizmetler ve randevu section'ında direk aşağıya inilebilsin, scroll ile 01 02 03 arasında gezilmesin; tıklanınca açılıyorlar zaten".
   acilan'dan farkı: masaüstü yapışkan sahnesi (bölüm 340svh, kaydırma altıya bölünür) YOK — bölüm normal akışta; satır tıklayınca açılır.
   Adlar: kimlik #s-acilan-akis, kök .acilan-akis, önek aca- (acilan'da aca-, ikinci sürümde hzm-). Kütüphane farkları: _uretec/19-surum2-bolumleri.py
   başı (iki katman: html.w-mod-js + prefers-reduced-motion; betik YB.s2). Aşağıdaki açıklama ikinci sürümdekinin aynısı. ── */
/* ── bölüm: hizmetler · genişleyen satırlar (2026-10-15) ──
   Solda başlık bloğu + çerçevede açık hizmetin görseli; sağda altı satır. Satıra tıklayınca o satır açılır (alt yazı + maddeler), açık olan
   kapanır, kapalılar soluk; açık olana tıklayınca kapanır (2026-11-01: tek açık, sayfa kendiliğinden kaymaz — bolum.js). Geniş ekranda
   çerçevedeki görsel dikey şeritlerle değişir (aşağıdaki satıra geçerken alttan, yukarıdakine üstten); dar ekranda görsel satırın içinde.
   Kaydırma bölümde durmaz. */
.acilan-akis { background-color: var(--bej); color: var(--yesil-ana); overflow-anchor: none; }   /* tarayıcının kaydırma çapası kapalı: kaydırmayı yalnız betik yapar (bolum.js ustKismiDus) */
.aca-sahne { padding: 7em 0 6em; }
.aca-kap { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr); gap: 4.5em; align-items: start; }
.aca-sol { display: grid; gap: 1.35em; align-content: start; justify-items: start; }
.aca-etiket { width: 100%; color: var(--baslik-rengi); }
.aca-baslik { color: var(--baslik-rengi); }
.aca-metin { max-width: 26em; }
.aca-cerceve { position: relative; width: 100%; aspect-ratio: 1 / .78; margin-top: .8em; border-radius: var(--yaricap); overflow: hidden;
  background-color: var(--kum); isolation: isolate; }
.aca-gorsel { position: absolute; inset: 0; display: grid; place-items: center; background-color: var(--kum); visibility: hidden; }
.aca-gorsel.etkin { visibility: visible; }
.aca-gorsel img, .aca-serit-ic img { width: 66%; height: 80%; object-fit: contain; }
.aca-serit { position: absolute; top: 0; bottom: 0; overflow: hidden; background-color: var(--kum); }
.aca-serit-ic { position: absolute; top: 0; display: grid; place-items: center; }
.aca-liste { border-top: 1px solid var(--cizgi-koyu); }
.aca-oge { border-bottom: 1px solid var(--cizgi-koyu); }
.aca-oge-bas { margin: 0; font: inherit; }
.aca-dugme { width: 100%; cursor: pointer; display: grid; grid-template-columns: 3em minmax(0, 1fr) 2.2em; align-items: center; gap: 1em; padding: 1.15em 0;
  text-align: left; -webkit-tap-highlight-color: transparent; }   /* dokununca satır gri kutuyla parlamasın (2026-10-29) */
.aca-no { align-self: start; padding-top: .9em; font-size: .9em; color: var(--baslik-rengi); }
.aca-ad { font-size: 2.55em; font-weight: 400; letter-spacing: -.03em; line-height: 1.06; color: var(--yesil-ana);
  transition: color .5s, transform .6s var(--yumusak); }
.aca-oge:not(.etkin) .aca-ad { color: rgba(64, 79, 29, .4); }
@media (hover: hover) {
  .aca-dugme:hover .aca-ad { color: var(--yesil-ana); transform: translateX(.18em); }
}
.aca-arti { position: relative; justify-self: end; width: 2.2em; height: 2.2em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cizgi-koyu);
  transition: background-color .4s, box-shadow .4s; }
.aca-arti::before, .aca-arti::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8em; height: 1.5px; margin: -.75px 0 0 -.4em;
  background-color: currentColor; transition: transform .6s var(--yumusak); }
.aca-arti::after { transform: rotate(90deg); }
.aca-oge.etkin .aca-arti { background-color: var(--yesil-ana); color: var(--bej); box-shadow: none; }
.aca-oge.etkin .aca-arti::after { transform: rotate(0deg); }
.aca-ayrinti { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--yumusak); }
.aca-oge.etkin .aca-ayrinti { grid-template-rows: 1fr; }
.aca-ayrinti-ic { min-height: 0; overflow: hidden; display: grid; gap: 1em; padding-left: 4em; }
.aca-ayrinti-ic > :last-child { margin-bottom: 1.5em; }
.aca-alt { max-width: 30em; }
.aca-maddeler { display: flex; flex-wrap: wrap; gap: .5em; }
.aca-maddeler li { padding: .55em 1em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--cizgi-koyu); font-size: .95em; line-height: 1.2; }
.aca-maddeler .aca-rozet { display: inline-flex; align-items: center; gap: .5em; background-color: var(--yesil-ana); color: var(--bej); box-shadow: none; }
.aca-maddeler .aca-rozet::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background-color: currentColor; }
.aca-mobil-gorsel { display: none; }
@media screen and (max-width: 991px) {
  .aca-sahne { padding: 5.5em 0 4.5em; }
  .aca-kap { grid-template-columns: minmax(0, 1fr); gap: 2.6em; }
  .aca-cerceve, .aca-sayac { display: none; }
  .aca-mobil-gorsel { display: block; width: 100%; max-width: 26em; aspect-ratio: 1 / .78; object-fit: contain; padding: 1.2em 2.4em;
    border-radius: var(--yaricap); background-color: var(--kum); }
  .aca-ayrinti-ic { padding-left: 0; }
}
@media screen and (max-width: 767px) {
  .aca-dugme { grid-template-columns: 2.2em minmax(0, 1fr) 2.2em; gap: .7em; padding: 1em 0; }
  .aca-no { padding-top: .45em; }
  .aca-ad { font-size: 1.55em; }
  .aca-maddeler li { font-size: .88em; }
}