/* ==========================================================================
   PİKSEL NİNJA — ATÖLYELER · bileşen stilleri
   /program1 (birebir) ve /program3 (site çerçevesi) ortak kullanır.
   Kaynak: 2026-10-12pikselninja-atolyeler.html. Kart tema rengi kart üzerindeki
   --tema değişkeninden, koyu zemin .koyu sınıfından gelir (araç eklenebilsin diye).
   ========================================================================== */

:root{
  /* Katman A — kurumsal çekirdek */
  --navy:#1A2A4A;
  --mavi:#27A9E1;

  /* Araç renkleri — basılı atölye kartlarıyla birebir */
  --c-scratch:#F58220;
  --c-tinkercad:#27A9E1;
  --c-delightex:#A341DA;
  --c-minecraft:#6489F3;
  --c-yaratici:#C990E9;

  /* Kazanım grupları */
  --k-kodsal:#C0DB5A;
  --k-tasarimsal:#C990E9;
  --k-anlatisal:#6489F3;

  /* Yüzeyler */
  --beyaz:#FFFFFF;
  --kagit:#F7F8FA;
  --hat:#E4E8EF;
  --soluk:#5B6880;

  --f-baslik:"Space Grotesk",system-ui,sans-serif;
  --f-govde:"IBM Plex Sans",system-ui,sans-serif;
  --f-etiket:"IBM Plex Mono",ui-monospace,monospace;

  --kenar:88px;
  --r:18px;
  --r-sm:10px;
}

.kapsayici{max-width:1240px;margin:0 auto;padding-inline:var(--kenar)}

.etiket{
  font-family:var(--f-etiket);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mavi);
  display:block;margin:0 0 14px;
}
.etiket--ters{color:var(--k-kodsal)}
.giris{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--soluk);max-width:62ch;margin-top:22px}

.bolum{padding:clamp(56px,7vw,96px) 0}
.bolum--kagit{background:var(--kagit)}
.bolum--navy{background:var(--navy);color:var(--beyaz)}
.bolum--navy h2,.bolum--navy h3{color:var(--beyaz)}
.bolum--navy p{color:rgba(255,255,255,.82)}

/* --- Kareli kâğıt dokusu: basılı kartların orta panelinden gelir --------- */
.kareli{
  background-color:var(--beyaz);
  background-image:
    linear-gradient(var(--hat) 1px,transparent 1px),
    linear-gradient(90deg,var(--hat) 1px,transparent 1px);
  background-size:26px 26px;
}

/* --- Butonlar ------------------------------------------------------------ */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 26px;border-radius:999px;
  font-family:var(--f-govde);font-size:1rem;font-weight:600;
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.dugme:hover{text-decoration:none}
.dugme--ana{background:var(--navy);color:var(--beyaz)}
.dugme--ana:hover{background:#24365E}
.dugme--lime{background:var(--k-kodsal);color:var(--navy)}
.dugme--lime:hover{background:#CCE472}
.dugme--cizgi{background:transparent;color:var(--navy);border-color:var(--navy)}
.dugme--cizgi:hover{background:var(--navy);color:var(--beyaz)}
.dugme--sm{min-height:44px;padding:10px 20px;font-size:.94rem}

/* --- Hero ---------------------------------------------------------------- */
.hero{padding:clamp(44px,5vw,72px) 0 clamp(36px,4vw,52px)}
.hero h1{max-width:16ch}
.hero-alt{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--soluk);max-width:52ch;margin:22px 0 30px}
.hero-eylem{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Künye şeridi */
.kunye{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;border-top:1px solid var(--hat);border-bottom:1px solid var(--hat)}
.kunye div{padding:22px 24px 22px 0;border-right:1px solid var(--hat)}
.kunye div:last-child{border-right:none}
.kunye dt{font-family:var(--f-etiket);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);margin-bottom:6px}
.kunye dd{margin:0;font-family:var(--f-baslik);font-weight:700;font-size:1.22rem;letter-spacing:-.01em}
.kunye small{display:block;font-family:var(--f-govde);font-weight:400;font-size:.86rem;color:var(--soluk);letter-spacing:0;margin-top:3px}

/* --- Filtre -------------------------------------------------------------- */
.filtre{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;margin-top:8px}
.filtre-grup{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtre-ad{font-family:var(--f-etiket);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soluk);margin-right:6px}
.cip{
  font-family:var(--f-govde);font-size:.92rem;font-weight:500;
  min-height:44px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--hat);background:var(--beyaz);color:var(--navy);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.cip:hover{border-color:var(--navy)}
.cip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--beyaz)}
.cip .nokta{width:9px;height:9px;border-radius:2px;display:inline-block}
.sayac{font-family:var(--f-etiket);font-size:.8rem;letter-spacing:.06em;color:var(--soluk);white-space:nowrap}

/* --- Atölye ızgarası ----------------------------------------------------- */
.izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:start}

.atolye{
  border-radius:var(--r);overflow:hidden;background:var(--beyaz);
  border:1px solid var(--hat);display:flex;flex-direction:column;
}
.atolye[hidden]{display:none}

.a-bas{padding:24px 24px 26px;position:relative;display:flex;flex-direction:column;min-height:232px}
.a-bas h3{margin-top:auto}
.a-rozetler{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.a-arac{
  font-family:var(--f-etiket);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;background:var(--beyaz);color:var(--navy);
  border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:7px;
}
.a-arac .nokta{width:8px;height:8px;border-radius:2px}
.a-oturum{
  font-family:var(--f-etiket);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;
  padding:5px 12px;display:inline-flex;align-items:center;
}
.a-yas{
  position:absolute;top:24px;right:24px;
  font-family:var(--f-etiket);font-size:.68rem;font-weight:500;letter-spacing:.08em;
  background:var(--navy);color:var(--beyaz);border-radius:999px;padding:7px 14px;
}
.a-bas h3{font-size:clamp(1.3rem,1.9vw,1.55rem);margin-bottom:10px;max-width:15ch;text-transform:uppercase;letter-spacing:-.025em}
.a-ozet{font-size:.97rem;margin:0;max-width:34ch}


/* tema zemini (kart üzerindeki --tema) — açık zemin → lacivert yazı */
.atolye .a-bas{background:var(--tema)}
.atolye:not(.koyu) .a-ozet{color:rgba(26,42,74,.86)}
.atolye:not(.koyu) .a-oturum{color:var(--navy)}

/* koyu zemin → beyaz yazı */
.atolye.koyu .a-bas h3{color:var(--beyaz)}
.atolye.koyu .a-ozet{color:rgba(255,255,255,.88)}
.atolye.koyu .a-oturum{color:var(--beyaz)}
.atolye.koyu .a-yas{background:rgba(26,42,74,.92)}

.a-govde{padding:22px 24px 24px;display:flex;flex-direction:column;gap:18px;flex:1}

.kazanimlar{display:flex;flex-direction:column;gap:9px}
.kaz{display:flex;align-items:center;gap:11px}
.kaz-ikon{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center}
.kaz-ikon svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kaz b{display:block;font-family:var(--f-govde);font-weight:600;font-size:.93rem;line-height:1.25}
.kaz span{font-family:var(--f-etiket);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--soluk)}

.a-alt{margin-top:auto;padding-top:18px;border-top:1px solid var(--hat);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.a-meta{font-family:var(--f-baslik);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.a-meta small{display:block;font-family:var(--f-govde);font-weight:400;font-size:.78rem;color:var(--soluk);letter-spacing:0;margin-top:1px}

.ac{
  font-family:var(--f-etiket);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;color:var(--mavi);background:none;border:none;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0;
}
.ac .ok{transition:transform .2s ease;display:inline-block}
.ac[aria-expanded="true"] .ok{transform:rotate(90deg)}

.a-ayrinti{display:none;border-top:1px solid var(--hat);padding:22px 24px 26px;background:var(--kagit)}
.a-ayrinti.acik{display:block}
.a-ayrinti h4{font-family:var(--f-etiket);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mavi);margin:0 0 10px}
.a-ayrinti h4+h4{margin-top:22px}
.a-ayrinti p{font-size:.93rem;color:var(--soluk)}
.akis{list-style:none;margin:0;padding:0;counter-reset:ot}
.akis li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed var(--hat);font-size:.92rem;color:var(--soluk)}
.akis li:last-child{border-bottom:none}
.akis li::before{
  counter-increment:ot;content:"0" counter(ot);
  font-family:var(--f-etiket);font-size:.72rem;letter-spacing:.06em;color:var(--mavi);padding-top:2px;
}
.akis--duz li{grid-template-columns:1fr}
.akis--duz li::before{content:none}
.a-not{margin-top:20px;padding:13px 16px;border-left:3px solid var(--mavi);background:var(--beyaz);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.88rem;color:var(--soluk)}

.bos{display:none;padding:52px 0;text-align:center;color:var(--soluk);font-family:var(--f-etiket);font-size:.86rem;letter-spacing:.06em}
.bos.goster{display:block}

/* --- Bilgi listesi ------------------------------------------------------- */
.bilgi{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px;margin-top:38px}
.bilgi div{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.bilgi h3{font-size:1.02rem;margin-bottom:5px}
.bilgi p{font-size:.93rem;margin:0}

/* --- CTA ----------------------------------------------------------------- */
.cta h2{max-width:20ch}
.cta p{max-width:58ch;margin-top:20px}
.cta .hero-eylem{margin-top:30px}


/* --- Opsiyonel alanlar (yalnızca doluysa basılır) ------------------------- */
.a-gorsel{aspect-ratio:16/9;overflow:hidden;background:var(--kagit)}
.a-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.a-ek{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.a-ek dt{font-family:var(--f-etiket);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--soluk)}
.a-ek dd{margin:0;font-weight:600;font-size:.93rem}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1180px){
  :root{--kenar:56px}
}
@media (max-width:1080px){
  .izgara{grid-template-columns:repeat(2,1fr)}
  .kunye{grid-template-columns:repeat(2,1fr)}
  .kunye div:nth-child(2){border-right:none}
  .kunye div:nth-child(1),.kunye div:nth-child(2){border-bottom:1px solid var(--hat)}
  .a-bas{min-height:210px}
}
@media (max-width:860px){
  :root{--kenar:28px}
  .izgara,.bilgi{grid-template-columns:1fr}
  .izgara{gap:18px}
  .bilgi{gap:0}
  .filtre{align-items:flex-start;flex-direction:column;gap:14px}
  .sayac{order:-1}
  .a-bas{min-height:0;padding-bottom:24px}
  .a-bas h3{max-width:none;margin-top:14px}
  .a-ozet{max-width:48ch}
}
@media (max-width:560px){
  :root{--kenar:20px}
  body{font-size:16px}
  .bolum{padding:48px 0}
  .hero{padding:32px 0 28px}
  .hero-alt{margin-bottom:26px}
  .hero-eylem .dugme{flex:1 1 100%}
  .kunye{grid-template-columns:1fr;margin-top:38px}
  .kunye div{border-right:none;border-bottom:1px solid var(--hat);padding:16px 0}
  .kunye div:last-child{border-bottom:none}
  .kunye dd{font-size:1.12rem}
  .a-yas{position:static;margin-left:auto}
  .a-rozetler{padding-right:0}
  .a-bas,.a-govde,.a-ayrinti{padding-left:20px;padding-right:20px}
  .filtre-ad{width:100%;margin:0 0 2px}
  .cip{font-size:.88rem;padding:10px 15px}
  .akis li{grid-template-columns:28px 1fr;gap:9px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .filtre,.ac{display:none!important}
  .a-ayrinti{display:block!important}
  .atolye{break-inside:avoid;border:1px solid #ccc}
  .bolum{padding:24px 0}
}

/* ==========================================================================
   Faz 2 — tıklanabilir kart, detay sayfası (/atolye/<slug>), ön kayıt formu
   ========================================================================== */

/* Kartın tamamı bağlantı */
a.atolye{color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.atolye:hover{color:inherit;text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,42,74,.12);border-color:rgba(26,42,74,.22)}
a.atolye:hover .ac{color:var(--navy)}
a.atolye:hover .ac .ok{transform:translateX(3px)}
a.atolye:focus-visible{outline:3px solid var(--mavi);outline-offset:3px}
.a-bas .a-baslik{margin:auto 0 10px;max-width:15ch;text-transform:uppercase;letter-spacing:-.025em;color:var(--navy)}
.atolye.koyu .a-bas .a-baslik{color:var(--beyaz)}
@media (max-width:860px){ .a-bas .a-baslik{max-width:none;margin-top:14px} }

/* --- Detay sayfası --------------------------------------------------------- */
.ad-hero{background:var(--tema);padding:clamp(34px,5vw,64px) 0 clamp(36px,5vw,60px);position:relative;overflow:hidden}
.ad-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:linear-gradient(var(--navy) 1px,transparent 1px),linear-gradient(90deg,var(--navy) 1px,transparent 1px);background-size:26px 26px}
.ad-hero .kapsayici{position:relative;z-index:1}
.ad-geri{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-etiket);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:18px}
.ad-geri:hover{text-decoration:none;opacity:.75}
.ad-rozetler{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-items:center}
.ad-rozetler .a-yas{position:static}
.ad-rozetler .a-oturum{color:var(--navy)}
.ad-hero h1{max-width:18ch;color:var(--navy)}
.ad-ozet{font-size:clamp(1.08rem,1.6vw,1.28rem);max-width:52ch;margin:20px 0 28px;color:rgba(26,42,74,.86)}
.ad-hero.koyu .ad-geri,.ad-hero.koyu h1,.ad-hero.koyu .ad-rozetler .a-oturum{color:var(--beyaz)}
.ad-hero.koyu .ad-ozet{color:rgba(255,255,255,.9)}
.ad-hero.koyu .ad-rozetler .a-yas{background:rgba(26,42,74,.92)}
.ad-hero.koyu::after{background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px)}
.ad-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 28px}
.ad-meta div{display:flex;flex-direction:column}
.ad-meta dt{font-family:var(--f-etiket);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.ad-meta dd{margin:0;font-family:var(--f-baslik);font-weight:700;font-size:1.1rem}
.ad-hero.koyu .ad-meta{color:var(--beyaz)}

.ad-govde{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:clamp(28px,4vw,56px);align-items:start}
.ad-icerik h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 14px}
.ad-blok{padding:28px 0;border-bottom:1px solid var(--hat)}
.ad-blok:first-child{padding-top:0}
.ad-blok:last-child{border-bottom:none}
.ad-blok .etiket{margin-bottom:10px}
.ad-blok p{color:var(--navy)}
.ad-icerik .kazanimlar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ad-icerik .akis li{font-size:1rem;color:var(--navy);padding:12px 0}
.ad-icerik .a-not{background:var(--kagit)}
.ad-icerik .a-gorsel{border-radius:var(--r);margin-bottom:28px}

.ad-form{position:sticky;top:96px;background:var(--beyaz);border:1px solid var(--hat);border-radius:var(--r);padding:26px 24px;box-shadow:0 10px 30px rgba(26,42,74,.08)}
.ad-form h2{font-size:1.45rem;margin:0 0 8px}
.ad-form > p{font-size:.94rem;color:var(--soluk)}

.ad-diger .izgara{margin-top:26px}
.ad-pasif{background:var(--kagit);border:1px dashed var(--hat);border-radius:var(--r);padding:22px 24px;margin-top:8px;color:var(--soluk)}

@media (max-width:980px){
  .ad-govde{grid-template-columns:1fr}
  .ad-form{position:static}
}
@media (max-width:560px){
  .ad-icerik .kazanimlar{grid-template-columns:1fr}
  .ad-form{padding:22px 18px}
}

/* --- Ön kayıt formu -------------------------------------------------------- */
.on-kayit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px;margin-top:18px}
.of-tam{grid-column:1 / -1}
.of-alan{display:flex;flex-direction:column;gap:6px;min-width:0}
.of-alan label{font-size:.86rem;font-weight:600}
.of-alan label small{font-weight:400;color:var(--soluk)}
.of-alan input,.of-alan select,.of-alan textarea{
  font-family:var(--f-govde);font-size:16px;color:var(--navy);background:var(--beyaz);
  border:1.5px solid var(--hat);border-radius:var(--r-sm);padding:11px 13px;min-height:48px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.of-alan textarea{resize:vertical;min-height:84px}
.of-alan input:focus,.of-alan select:focus,.of-alan textarea:focus{outline:none;border-color:var(--mavi);box-shadow:0 0 0 3px rgba(39,169,225,.18)}
.of-hata{font-size:.8rem;color:#C2410C}
.of-uyari{grid-column:1 / -1;margin:0;padding:12px 14px;border-radius:var(--r-sm);background:#FFF4ED;color:#9A3412;font-size:.92rem}
.of-onay{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.of-kutu{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.88rem;line-height:1.5;cursor:pointer}
.of-kutu input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--navy)}
.of-kutu small{color:var(--soluk)}
.of-metin-ac{background:none;border:none;padding:0;font:inherit;color:var(--mavi);text-decoration:underline;cursor:pointer}
.of-gonder{width:100%;margin-top:6px}
.of-tuzak{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.of-basari{padding:22px 20px;border-radius:var(--r);background:rgba(192,219,90,.22);border:1px solid rgba(143,169,60,.4)}
.of-basari h3{font-size:1.2rem;margin:0 0 6px}
.of-basari p{margin:0}

.of-dialog{border:none;border-radius:var(--r);padding:0;max-width:min(680px,calc(100vw - 32px));width:100%;color:var(--navy);box-shadow:0 30px 80px rgba(26,42,74,.35)}
.of-dialog::backdrop{background:rgba(26,42,74,.55)}
.of-dialog-ic{padding:26px 24px 22px;max-height:min(80vh,760px);overflow:auto}
.of-dialog h3{font-size:1.3rem;margin:0 0 14px}
.of-dialog-metin{font-size:.92rem;line-height:1.6;color:var(--navy)}
.of-dialog-link{margin:16px 0}
.of-dialog form{margin-top:12px}

@media (max-width:560px){
  .on-kayit-form{grid-template-columns:1fr}
}

/* --- /kayit ---------------------------------------------------------------- */
.kayit-kart{max-width:680px;margin:0 auto;background:var(--beyaz);border:1px solid var(--hat);border-radius:var(--r);padding:clamp(22px,4vw,36px);box-shadow:0 10px 30px rgba(26,42,74,.08)}
.kayit-kart h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.kayit-kart > p{color:var(--soluk);margin-top:12px}
.kayit-alt{text-align:center;margin-top:22px;font-size:.94rem}

/* ==========================================================================
   Site çerçevesi içinde (.pn-atl): sitenin tokenları, sitenin genel stillerine
   dokunmadan. /program, /atolye/<slug>, /kayit ortak (Faz 1 /program3 tasarımı).
   ========================================================================== */
/* Atölye bileşenleri sitenin tokenlarıyla; sitenin genel stillerine dokunmadan yalnızca .pn-atl içinde */
.pn-atl{
  --navy:var(--pn-lacivert); --mavi:var(--pn-mavi); --hat:var(--pn-hat); --soluk:var(--pn-metin-soluk);
  --beyaz:var(--pn-beyaz); --k-kodsal:var(--pn-lime);
  --f-baslik:var(--font-baslik); --f-govde:var(--font-govde); --f-etiket:var(--font-etiket);
  --kenar:clamp(22px,6vw,88px);
}
.pn-atl *,.pn-atl *::before,.pn-atl *::after{box-sizing:border-box}
.pn-atl p,.pn-atl h1,.pn-atl h2,.pn-atl h3,.pn-atl li{overflow-wrap:break-word}
.pn-atl h1,.pn-atl h2,.pn-atl h3,.pn-atl h4{line-height:1.12;letter-spacing:-.02em;margin:0}
.pn-atl h1{font-size:clamp(2.3rem,5vw,3.9rem)}
.pn-atl h2{font-size:clamp(1.8rem,3.3vw,2.65rem)}
.pn-atl h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
.pn-atl h4{font-family:var(--font-baslik);font-weight:700}
.pn-atl p{margin:0 0 1.1em}
.pn-atl p:last-child{margin-bottom:0}
.pn-atl a{text-decoration:none}
.pn-atl :focus-visible{outline:3px solid var(--mavi);outline-offset:3px;border-radius:4px}

/* Hero: sitenin lacivert bant diliyle */
.pn-atl-hero{background:var(--pn-lacivert);color:var(--pn-beyaz);padding:clamp(40px,6vw,80px) 0 clamp(36px,5vw,60px);position:relative;overflow:hidden}
.pn-atl-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:26px 26px}
.pn-atl-hero .kapsayici{position:relative;z-index:1}
.pn-atl-hero .crumb{font-family:var(--font-etiket);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 18px}
.pn-atl-hero .crumb a{color:var(--pn-lime)}
.pn-atl-hero .crumb a:hover{color:var(--pn-beyaz)}
.pn-atl-hero .crumb span{margin:0 8px}
.pn-atl-hero h1{color:var(--pn-beyaz);max-width:16ch}
.pn-atl-hero .hero-alt{color:rgba(255,255,255,.82)}
.pn-atl-hero .dugme--cizgi{color:var(--pn-beyaz);border-color:rgba(255,255,255,.7)}
.pn-atl-hero .dugme--cizgi:hover{background:var(--pn-beyaz);color:var(--pn-lacivert)}
.pn-atl-hero .dugme--lime:hover{color:var(--pn-lacivert)}
.pn-atl-hero .kunye{border-color:rgba(255,255,255,.18)}
.pn-atl-hero .kunye div{border-color:rgba(255,255,255,.18)!important}
.pn-atl-hero .kunye div{padding:22px 16px;text-align:center}
.pn-atl-hero .kunye dt{color:var(--pn-lime)}
.pn-atl-hero .kunye dd{color:var(--pn-beyaz)}
.pn-atl-hero .kunye small{color:rgba(255,255,255,.66)}
.pn-atl .dugme--ana:hover{color:var(--pn-beyaz)}
.pn-atl .dugme--cizgi:hover{color:var(--pn-beyaz)}
.pn-atl-hero .dugme--cizgi:hover{color:var(--pn-lacivert)}
.pn-atl .ac:hover{color:var(--pn-lacivert)}
.pn-atl .ad-hero .dugme--ana:hover{color:var(--pn-beyaz)}
.pn-atl .ad-geri:hover{color:var(--navy)}
.pn-atl .ad-hero.koyu .ad-geri:hover{color:var(--beyaz)}
.pn-atl .of-metin-ac:hover{color:var(--pn-lacivert)}
/* .pn-atl p / h3 genel kurallarının üstüne: Faz 2 bileşenlerinin boşlukları */
.pn-atl .ad-ozet{margin:20px 0 28px}
.pn-atl .of-uyari,.pn-atl .of-basari p{margin:0}
.pn-atl .of-basari h3{font-size:1.2rem;margin:0 0 6px}
.pn-atl .of-dialog-link{margin:16px 0}
.pn-atl .of-dialog h3{font-size:1.3rem;margin:0 0 14px}
.pn-atl .kayit-kart > p{margin:12px 0 0}
.pn-atl .kayit-kart .kayit-alt{margin:22px 0 0}
.pn-atl .ad-form > p{margin:0}
.pn-atl .ad-blok p:last-child{margin-bottom:0}
.pn-atl .kayit-kart h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.pn-atl .ad-form h2{font-size:1.45rem;margin:0 0 8px}
.pn-atl .ad-hero h1{max-width:18ch}