/* ==================================================================
   PANO — sınıf panosu malzemeleri (pano.html)
   ------------------------------------------------------------------
   İki katman var:
     1) SEÇİCİ + PANO ÖNİZLEME — ekranda; afişin mantar panoda nasıl
        duracağı görünüyor.
     2) AFİŞ — A3 dikey oranında (297×420 mm). Bütün ölçüler tek bir
        değişkenden (--ae = afiş eni) türüyor; önizlemede küçük,
        yazdırırken tam boy çıkıyor. Yeniden ölçeklemek için başka
        hiçbir sayıya dokunmak gerekmiyor.
   ================================================================== */

:root {
  --yesil: #16A085;
  --yesilK: #0E7C66;
  --mur: #1F2430;
  --gri: #5B6471;
  --soluk: #8A93A0;
  --cizgi: #E3E8EF;
  --zemin: #EEF1F5;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--zemin); color: var(--mur);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---------------- üst şerit ---------------- */
.pn-ust {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: clamp(8px, .6vw, 12px) clamp(14px, 1.5vw, 28px);
  background: linear-gradient(120deg, #16A085, #0E7C66);
  color: #fff; box-shadow: 0 2px 12px rgba(14, 124, 102, .28); z-index: 5;
}
.pn-ust h1 {
  margin: 0; font-family: 'Marhey', sans-serif;
  font-size: clamp(1.2rem, 1.5vw, 2rem); font-weight: 700;
  display: flex; align-items: center; gap: 9px;
}
.pn-ust h1 svg { width: 1.15em; height: 1.15em; display: block; }
.pn-geri {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
  font-size: 1rem; transition: background .16s;
}
.pn-geri:hover { background: rgba(255, 255, 255, .3); }
.pn-arac { margin-inline-start: auto; display: inline-flex; gap: 8px; align-items: center; }
.pn-tus {
  border: 1.6px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12);
  color: #fff; font: inherit; font-weight: 800; border-radius: 999px; cursor: pointer;
  font-size: clamp(.8rem, .95vw, 1.1rem); padding: clamp(5px, .5vw, 10px) clamp(12px, 1.2vw, 22px);
  white-space: nowrap; transition: background .18s;
}
.pn-tus:hover { background: rgba(255, 255, 255, .28); }
.pn-tus[disabled] { opacity: .65; cursor: progress; }
/* ikonlu tuş (İndir) */
.pn-basli { display: inline-flex; align-items: center; gap: .45em; }
.pn-basli svg { width: 1.15em; height: 1.15em; display: block; }
.pn-tus.etkin { background: #fff; color: var(--yesilK); border-color: #fff; }

/* ---------------- gövde: liste + pano ---------------- */
.pn-govde { flex: 1 1 auto; min-height: 0; display: flex; }

.pn-liste {
  flex: 0 0 clamp(240px, 22vw, 340px); overflow: auto;
  background: #fff; border-inline-end: 1px solid var(--cizgi);
  padding: 14px 12px 28px;
}
.pn-liste h2 {
  margin: 6px 6px 10px; font-size: .78rem; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--soluk);
}
.pn-liste button {
  display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box;
  text-align: start; background: none; border: 0; border-radius: 12px;
  padding: 10px 11px; cursor: pointer; font: inherit; color: var(--mur);
  transition: background .15s;
}
.pn-liste button:hover { background: #F2FAF8; }
.pn-liste button[aria-current="true"] { background: #E8F6F3; }
.pn-liste .pn-nokta { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.pn-liste .pn-ad { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.pn-liste .pn-tar { display: block; font-weight: 500; font-size: .8rem; color: var(--soluk); margin-top: 1px; }
.pn-liste .pn-kok { font-size: 1.35rem; color: var(--gri); flex: 0 0 auto; }

/* ---------------- pano (mantar zemin) ---------------- */
.pn-pano {
  flex: 1 1 auto; min-width: 0; overflow: auto; display: grid; place-items: center;
  padding: clamp(18px, 3vw, 54px);
  background-color: #C79A5B;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .16) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .10) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, rgba(0, 0, 0, .07) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .12) 0 2px, transparent 3px),
    linear-gradient(160deg, #CFA469, #B9894A);
  background-size: 34px 34px, 46px 46px, 58px 58px, 40px 40px, 100% 100%;
  box-shadow: inset 0 0 0 10px #8C6239, inset 0 0 26px rgba(0, 0, 0, .28);
}
/* "gerçek boyut" kipinde pano zemini kalkar, afiş 1:1 görünür */
body.pn-gercek .pn-pano { background: #9AA3AF; box-shadow: none; align-items: start; }

.pn-asili { position: relative; transform: rotate(-.7deg); }
.pn-asili::before,
.pn-asili::after {
  content: ''; position: absolute; top: -9px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a80, #c0392b 70%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35); z-index: 2;
}
.pn-asili::before { left: 8%; }
.pn-asili::after { right: 8%; background: radial-gradient(circle at 35% 30%, #a5d6f7, #1f6feb 70%); }
body.pn-gercek .pn-asili { transform: none; }
body.pn-gercek .pn-asili::before,
body.pn-gercek .pn-asili::after { display: none; }

/* ==================================================================
   AFİŞ — A3 dikey.  --ae : afiş eni (px). Her ölçü bunun oranı.
   ================================================================== */
.pn-afis {
  --ae: 720px;
  /* --sk: içerik ölçeği. Afişin çerçevesi A3'te sabit; uzun el yazısı
     not ya da altı türevli kök taşırınca JS bunu 1'in altına çekiyor
     (bkz. pano.js → sigdir). Bütün iç ölçüler --m üzerinden yazıldığı
     için tek sayı değişince metnin tamamı birlikte küçülüyor; oranlar
     bozulmuyor ve baskıda da aynı görünüyor. */
  --sk: 1;
  --m: calc(var(--ae) * var(--sk));
  /* Açık tonlar CSS'in color-mix()'i ile değil, pano.js'te hesaplanıp
     satır içi yazılıyor (bkz. tint). SEBEP: afişi PNG olarak indiren
     html2canvas color-mix / color() gibi yeni renk yazımlarını
     okuyamıyor, indirme o yüzden hata veriyordu. Düz hex her yerde
     çalışıyor — eski tarayıcılarda da. */
  --acik12: #F2FBF9;
  --acik8: #F6FCFB;
  --ar: #1F2430;              /* koyu metin */
  --renk: #16A085;            /* günün rengi (JS yazar) */
  width: var(--ae);
  height: calc(var(--ae) * 1.41421);   /* A3: 297 × 420 */
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
body.pn-gercek .pn-afis { box-shadow: 0 8px 26px rgba(0, 0, 0, .2); }

/* üst bant */
.pn-bant {
  flex: 0 0 auto; background: var(--renk); color: #fff;
  padding: calc(var(--ae) * .03) calc(var(--ae) * .05) calc(var(--ae) * .024);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.pn-bant .pn-gun {
  font-family: 'Marhey', sans-serif; font-weight: 700; line-height: 1.12;
  font-size: calc(var(--ae) * .046);
}
.pn-bant .pn-tarih {
  flex: 0 0 auto; font-weight: 800; letter-spacing: .5px;
  font-size: calc(var(--ae) * .026); opacity: .95;
  border: 2px solid rgba(255, 255, 255, .6); border-radius: 999px;
  padding: calc(var(--ae) * .008) calc(var(--ae) * .022);
  white-space: nowrap;
}

/* içerik */
.pn-ic {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  /* Yatay dolgu --ae ile: kenar payı üst/alt bantla hizalı kalsın.
     Dikey dolgu --m ile: içerik küçülünce boşluk da küçülsün. */
  overflow: hidden;
  padding: calc(var(--m) * .03) calc(var(--ae) * .05) calc(var(--m) * .024);
}
.pn-uste {
  font-family: 'Caveat', 'Marhey', cursive; color: var(--renk);
  font-size: calc(var(--m) * .05); line-height: 1; margin: 0 0 calc(var(--m) * .012);
}

/* kök harfleri */
.pn-kokkutu { display: flex; justify-content: center; gap: calc(var(--m) * .022); direction: rtl; }
/* DİKKAT — harf kutusu neden böyle kuruldu:
   Eskiden "display:grid; place-items:center; line-height:1" vardı.
   Ekranda düzgün duruyordu ama PDF'e alırken (html2canvas) harfler
   kutudan taşıyordu: ع, ج, م gibi harflerin kuyruğu satır kutusunun
   dışına çıkıyor, kütüphane de yazıyı tarayıcıdan biraz farklı
   yerleştiriyor. Çözüm: ızgara ortalaması yerine normal bir satır
   kutusu — line-height kutu boyuna eşit — ve harfe bol pay. Böylece
   kuyruklar kutunun içinde kalıyor. */
.pn-harf {
  width: calc(var(--m) * .165); height: calc(var(--m) * .2);
  display: block; text-align: center;
  line-height: calc(var(--m) * .2);
  border-radius: calc(var(--m) * .028);
  background: var(--acik12);   /* bkz. pano.js → tint() */
  border: calc(var(--m) * .006) solid var(--renk);
  color: var(--renk); font-size: calc(var(--m) * .1);
  overflow: hidden;
}
.pn-kokalt {
  text-align: center; color: var(--soluk); font-weight: 700;
  font-size: calc(var(--m) * .026); margin-top: calc(var(--m) * .01);
  letter-spacing: .6px; text-transform: uppercase;
}

/* türeyen kelimeler */
.pn-turev {
  margin-top: calc(var(--m) * .02); display: flex; flex-direction: column;
  gap: calc(var(--m) * .004);
}
.pn-sat {
  display: flex; align-items: baseline; gap: calc(var(--m) * .02);
  padding: calc(var(--m) * .009) calc(var(--m) * .012);
  border-bottom: 1px dashed #DDE3EC;
}
.pn-sat:last-child { border-bottom: 0; }
.pn-sat .pn-ar {
  flex: 0 0 auto; min-width: calc(var(--m) * .3); text-align: right; direction: rtl;
  font-size: calc(var(--m) * .062); line-height: 1.25; color: var(--ar);
}
.pn-sat .pn-tr {
  flex: 1 1 auto; font-weight: 800; font-size: calc(var(--m) * .032); color: var(--mur);
}
.pn-sat .pn-uzun {
  display: block; font-weight: 500; font-size: calc(var(--m) * .026); color: var(--soluk);
  line-height: 1.35; margin-top: calc(var(--m) * .002);
}

/* örnek cümleler (en çok üç; kaçının yazılacağına pano.js karar verir) */
.pn-ornek {
  margin-top: auto; display: flex; flex-direction: column;
  gap: calc(var(--m) * .011);
}
.pn-cumle {
  background: var(--acik8);
  border-inline-start: calc(var(--m) * .009) solid var(--renk);
  border-radius: calc(var(--m) * .016);
  padding: calc(var(--m) * .016) calc(var(--m) * .024);
}
.pn-cumle .pn-car {
  direction: rtl; text-align: right; font-size: calc(var(--m) * .054);
  line-height: 1.55; color: var(--ar);
}
.pn-cumle .pn-ctr {
  font-size: calc(var(--m) * .03); color: var(--gri); margin-top: calc(var(--m) * .005);
  line-height: 1.35;
}
.pn-cumle .pn-kaynak {
  display: block; font-size: calc(var(--m) * .024); color: var(--soluk);
  margin-top: calc(var(--m) * .003);
}

/* el yazısı not */
.pn-not {
  font-family: 'Caveat', 'Marhey', cursive;
  font-size: calc(var(--m) * .044); line-height: 1.22; color: #45505F;
  margin-top: calc(var(--m) * .016);
}

/* alt bant */
.pn-alt {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: calc(var(--ae) * .014) calc(var(--ae) * .05) calc(var(--ae) * .02);
  color: var(--soluk); font-size: calc(var(--ae) * .026); font-weight: 700;
}
.pn-alt .pn-cizgi { flex: 1 1 auto; height: 2px; background: #E7ECF3; border-radius: 2px; }

/* ---------------- dar ekran ---------------- */
@media (max-width: 860px) {
  .pn-govde { flex-direction: column; }
  .pn-liste { flex: 0 0 auto; max-height: 38vh; border-inline-end: 0; border-bottom: 1px solid var(--cizgi); }
}

/* ==================================================================
   YAZDIRMA — yalnız afiş, A3 dikey, kenar boşluksuz
   ================================================================== */
@media print {
  @page { size: A3 portrait; margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; }
  .pn-ust, .pn-liste { display: none !important; }
  .pn-govde { display: block; }
  .pn-pano {
    display: block; padding: 0; background: #fff !important; box-shadow: none !important;
  }
  .pn-asili { transform: none; }
  .pn-asili::before, .pn-asili::after { display: none; }
  .pn-afis {
    /* !important ŞART: pano.js önizleme için --ae'yi satır içi stille
       (ör. 555px) yazıyor ve satır içi stil normalde bu kuralı ezer.
       Ezerse çerçeve A3'e büyür ama yazılar önizleme boyunda kalır;
       çıktıda afişin ortası kocaman boş görünür. */
    --ae: 297mm !important;
    width: 297mm; height: 420mm; box-shadow: none;
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* ==================================================================
   YENİ SAYFA TÜRLERİ
   ------------------------------------------------------------------
   Kural aynı: bütün ölçüler --m üzerinden. Böylece "sığdıkça büyüsün"
   ayarı yazıyı da şekli de birlikte ölçekliyor ve sayfa hiç taşmıyor.
   Çerçevenin türü gövdede pn-t-<tür> sınıfıyla belli.
   ================================================================== */

/* ---------------- soldaki grup şeridi ---------------- */
.pn-gruplar {
  position: sticky; top: 0; z-index: 2; background: #fff;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 2px 4px 12px; border-bottom: 1px solid var(--cizgi); margin-bottom: 10px;
}
.pn-gruplar button {
  flex: 1 1 46%; display: block; text-align: start; cursor: pointer; font: inherit;
  border: 1.5px solid var(--cizgi); background: #fff; color: var(--mur);
  border-radius: 11px; padding: 7px 10px; font-weight: 800; font-size: .84rem;
  line-height: 1.15; transition: background .15s, border-color .15s;
}
.pn-gruplar button span {
  display: block; font-weight: 500; font-size: .7rem; color: var(--soluk); margin-top: 2px;
}
.pn-gruplar button:hover { background: #F2FAF8; }
.pn-gruplar button[aria-current="true"] {
  background: var(--yesilK); border-color: var(--yesilK); color: #fff;
}
.pn-gruplar button[aria-current="true"] span { color: rgba(255, 255, 255, .8); }

.pn-liste .pn-olcu {
  flex: 0 0 auto; font-size: .7rem; font-weight: 800; color: var(--soluk);
  border: 1.5px solid var(--cizgi); border-radius: 999px; padding: 1px 7px;
}
.pn-bekle { padding: 22px; color: #fff; font-weight: 700; text-align: center; }
.pn-liste .pn-bekle { color: var(--soluk); }

/* ---------------- ortak: kontur (SVG) ---------------- */
.pn-yol { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------- alt banttaki karekod ---------------- */
.pn-qrkutu {
  flex: 0 0 auto; width: calc(var(--ae) * .072); height: calc(var(--ae) * .072);
  margin-inline-end: calc(var(--ae) * .012);
}
.pn-qr { display: block; width: 100%; height: 100%; }

/* ==================================================================
   KELİME AİLESİ AĞACI
   ================================================================== */
.pn-agacic { align-items: center; }
.pn-agacic .pn-uste, .pn-agacic .pn-not { align-self: stretch; }
.pn-govdecizgi {
  position: relative; width: 100%; margin-top: calc(var(--m) * .026);
  padding: calc(var(--m) * .01) 0;
}
.pn-govdecizgi::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: calc(var(--m) * .009); background: var(--renk); opacity: .45;
  transform: translateX(-50%); border-radius: 99px;
}
.pn-dallar { display: flex; flex-direction: column; gap: calc(var(--m) * .016); }
/* Kutular orta çizgiyi geçmesin: yarım genişlik, bağlantı çizgisi
   de bu yarımın içinden pay alıyor. */
.pn-dal { display: flex; align-items: center; width: 50%; }
.pn-dal.sol { margin-inline-end: auto; flex-direction: row-reverse; }
.pn-dal.sag { margin-inline-start: auto; }
.pn-dalcizgi {
  flex: 0 0 calc(var(--m) * .05); height: calc(var(--m) * .007);
  background: var(--renk); opacity: .45;
}
.pn-dalkutu {
  flex: 1 1 auto; display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--m) * .02); background: var(--acik12);
  border: calc(var(--m) * .004) solid var(--renk);
  border-radius: calc(var(--m) * .018);
  padding: calc(var(--m) * .012) calc(var(--m) * .022);
  /* gövde çizgisi mutlak konumlu; kutu onun ÜSTÜNDE kalsın */
  position: relative;
}
.pn-dalkutu b { font-size: calc(var(--m) * .058); font-weight: 400; color: var(--ar); }
.pn-dalkutu i { font-style: normal; font-weight: 800; font-size: calc(var(--m) * .03); color: var(--mur); }

/* ==================================================================
   GÜNLÜK İFADELER
   ================================================================== */
.pn-iust {
  direction: rtl; text-align: center; color: var(--renk);
  font-size: calc(var(--m) * .052); line-height: 1.3; margin: 0 0 calc(var(--m) * .022);
}
.pn-ifade { display: flex; flex-direction: column; gap: calc(var(--m) * .012); }
.pn-isat {
  display: flex; flex-direction: row-reverse; align-items: baseline;
  gap: calc(var(--m) * .02); background: var(--acik8);
  border-inline-end: calc(var(--m) * .008) solid var(--renk);
  border-radius: calc(var(--m) * .014);
  padding: calc(var(--m) * .014) calc(var(--m) * .022);
}
.pn-iar {
  flex: 0 0 50%; direction: rtl; text-align: right;
  font-size: calc(var(--m) * .056); line-height: 1.45; color: var(--ar);
}
.pn-itr { flex: 1 1 auto; font-weight: 800; font-size: calc(var(--m) * .032); color: var(--mur); }

/* ==================================================================
   HAT BOYAMA — tezhip çerçeveli kelime
   ================================================================== */
.pn-hatic { align-items: center; text-align: center; }
.pn-hatic .pn-uste { align-self: stretch; }
/* KARE olmalı: tezhip çizimi 1000x1000 kare düzlemde. Dikdörtgen
   kutuya esnetilince daireler yumurtaya dönüyor, süsler birbirine
   giriyordu. Kutu kare olunca çizim birebir oturuyor; sayfanın artan
   boşluğunu da ölçek (--sk) yutuyor, yani kelime yine büyüyor. */
.pn-hatkutu {
  position: relative; flex: 0 0 auto;
  width: calc(var(--m) * .82); height: calc(var(--m) * .82);
  margin: calc(var(--m) * .022) auto 0;
}
.pn-tezhip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* iç çerçeve 96..904 arası; kelime onun içinde kalsın */
.pn-hatyol { position: absolute; left: 11%; top: 11.5%; width: 78%; height: 77%; }
.pn-hattr { margin-top: calc(var(--m) * .026); }
.pn-hattr b { display: block; font-size: calc(var(--m) * .06); color: var(--mur); }
.pn-hattr i {
  display: block; font-style: normal; font-size: calc(var(--m) * .03);
  color: var(--soluk); margin-top: calc(var(--m) * .006);
}

/* ==================================================================
   HARF BOYAMA
   ================================================================== */
.pn-harfic { align-items: center; text-align: center; }
.pn-harfic .pn-uste { align-self: stretch; }
.pn-buyukharf {
  width: 100%; height: calc(var(--m) * .42); margin-top: calc(var(--m) * .01);
}
.pn-haller {
  display: flex; width: 100%; gap: calc(var(--m) * .018); margin-top: calc(var(--m) * .03);
}
.pn-hal {
  flex: 1 1 0; background: var(--acik8);
  border: calc(var(--m) * .004) solid var(--renk);
  border-radius: calc(var(--m) * .018); padding: calc(var(--m) * .014) calc(var(--m) * .008);
}
.pn-hal .pn-yol { height: calc(var(--m) * .17); }
.pn-hal span {
  display: block; margin-top: calc(var(--m) * .008);
  font-size: calc(var(--m) * .026); font-weight: 700; color: var(--soluk);
}
.pn-uyari {
  margin: calc(var(--m) * .018) 0 0; font-size: calc(var(--m) * .028);
  font-weight: 700; color: var(--renk);
}
.pn-ornekkelime {
  width: 100%; margin-top: calc(var(--m) * .03); display: flex;
  align-items: center; justify-content: center; gap: calc(var(--m) * .03);
}
.pn-ornekkelime .pn-yol { flex: 0 1 68%; height: calc(var(--m) * .22); }
.pn-ornekkelime span { font-size: calc(var(--m) * .036); font-weight: 800; color: var(--mur); }

/* ==================================================================
   YAZMA ŞERİDİ — kesik çizgi, üzerinden geçilecek
   ================================================================== */
.pn-yazmaic { align-items: center; text-align: center; }
.pn-yazmaic .pn-uste { align-self: stretch; }
.pn-yzalan {
  width: 100%; display: flex; flex-direction: column;
  gap: calc(var(--m) * .022); margin-top: calc(var(--m) * .022);
}
.pn-yzsatir {
  display: flex; gap: calc(var(--m) * .014); height: calc(var(--m) * .155);
  border-bottom: calc(var(--m) * .005) solid #AEBACB;
  padding-bottom: calc(var(--m) * .012);
}
/* öğrencinin kendi yazacağı boş satırlar */
.pn-yzsatir.pn-bos { height: calc(var(--m) * .13); border-bottom-style: dashed; }
.pn-yz { flex: 1 1 0; }

/* ==================================================================
   HARF BAĞLANTI TABLOSU
   ================================================================== */
.pn-tabloic .pn-uste { text-align: center; }
.pn-tablo { width: 100%; display: flex; flex-direction: column; margin-top: calc(var(--m) * .014); }
.pn-tbsat {
  display: flex; align-items: center; gap: calc(var(--m) * .008);
  border-bottom: 1px solid #E3E8EF; padding: calc(var(--m) * .007) 0;
}
.pn-tbsat > span { flex: 1 1 0; text-align: center; }
.pn-tbsat .pn-tbad {
  flex: 0 0 calc(var(--m) * .2); text-align: start;
  font-weight: 800; font-size: calc(var(--m) * .026); color: var(--mur);
}
.pn-tbsat .pn-tbad i { font-style: normal; font-weight: 500; color: var(--soluk); }
.pn-tbyol { height: calc(var(--m) * .085); }
.pn-tbbas {
  border-bottom: calc(var(--m) * .004) solid var(--renk); padding-bottom: calc(var(--m) * .008);
}
.pn-tbbas > span {
  font-size: calc(var(--m) * .022); font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--soluk);
}

/* ==================================================================
   A4 SAYFALAR — çerçeve oranı aynı (√2), yalnız baskı ölçüsü değişir
   ================================================================== */
@media print {
  body.pn-a4 .pn-afis {
    --ae: 210mm !important;
    width: 210mm; height: 297mm;
  }
}