/* =====================================================================
   SÖZLEŞME — `pgk-` (program-gün-kurulum) · R10 · belge §4.3 · §5.2
   ---------------------------------------------------------------------
   "Programa Başla" bugüne kadar bir kayıt açıyordu ama takvim kurmuyordu:
   baslangic:null · gunler:[] · saat:null. Takvime oturmayan program,
   program değil listedir — ürün "yarın 07:30, Gün 2" diyemiyordu.

   Bu blok üç soruyu soruyor (hangi günler · saat kaçta · ne zaman
   başlıyor) ve cevapları ANINDA gerçek randevulara çeviriyor.

   İMZA ÖGE — `.pgk-randevu`: sözleşme kendi çıktısına dönüşen bir defter
   şeridi. Sol rayda hairline bir çizgi seansları birbirine bağlıyor;
   kullanıcı bir gün çipine bastığında satırlar yeniden yazılıyor. Formun
   ürettiği şeyi form doldururken görüyorsun. Sayfadaki tek gösterişli
   parça bu; geri kalan her şey kabuğun sessiz diliyle.

   Tarih/saat sütunları `tabular-nums` — takvim sayı tablosudur, rakamlar
   satırdan satıra kaymamalı.

   Kabuk sözleşmesine dokunulmadı: yalnız `pgk-`/`pgc-` sınıfları,
   hepsi `#pgWrap` altında. `!important` yok, özgüllük `#pgWrap` ile
   yükseltiliyor.
   ===================================================================== */

#pgWrap .pgk,
#pgWrap .pgc{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
#pgWrap .pgk[hidden],
#pgWrap .pgc[hidden]{display:none}

#pgWrap .pgk-kicker{font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fit-deep);margin:0 0 8px}
#pgWrap .pgk-h{font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--slate);margin:0}
#pgWrap .pgk-lead{font-size:13.5px;font-weight:500;color:var(--slate-2);line-height:1.6;margin:8px 0 0;max-width:56ch}

/* --- üç soru: sol soru, sağ cevap; hairline ile ayrılmış --- */
#pgWrap .pgk-sorular{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
#pgWrap .pgk-satir{display:flex;gap:22px;align-items:flex-start;padding:16px 20px}
#pgWrap .pgk-satir + .pgk-satir{border-top:1px solid var(--line)}
#pgWrap .pgk-q{flex:none;width:172px;padding-top:5px}
#pgWrap .pgk-q b{display:block;font-size:14px;font-weight:800;color:var(--slate);line-height:1.3}
#pgWrap .pgk-q small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;line-height:1.45}
#pgWrap .pgk-a{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
/* Çip kümesi kendi satırını kapar; "Başka saat/tarih" alanı yanında kalan
   yere geçer, yer yoksa alt satıra iner. Küme ile alanı aynı flex
   bağlamına koymak @390'da çipleri tek tek alt alta düşürüyordu. */
#pgWrap .pgk-grup{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Hafta yedi gündür: yedisi tek satırda, eşit sütunlarda — sarmaz. */
#pgWrap .pgk-hafta{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;flex:1 1 100%}
#pgWrap .pgk-hafta .pgk-gun{width:auto}

/* --- çipler: seçim durumu aria-pressed'te, görsel ona bağlı --- */
#pgWrap .pgk-cip{font-family:inherit;min-height:40px;padding:0 14px;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--radius-chip);
  font-size:13px;font-weight:700;color:var(--slate-2);cursor:pointer;
  transition:.16s var(--ease);font-variant-numeric:tabular-nums}
#pgWrap .pgk-cip:hover{border-color:var(--fit);color:var(--fit-deep)}
#pgWrap .pgk-cip:focus-visible{outline:3px solid var(--fit);outline-offset:2px}
#pgWrap .pgk-cip[aria-pressed="true"]{background:var(--fit-deep);border-color:var(--fit-deep);color:#fff}
#pgWrap .pgk-gun{width:46px;padding:0}

/* --- serbest giriş: saat / tarih --- */
#pgWrap .pgk-alan{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:600;color:var(--muted)}
#pgWrap .pgk-alan input{font-family:inherit;min-height:40px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:var(--radius-chip);background:var(--paper);
  font-size:13px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
#pgWrap .pgk-alan input:focus-visible{outline:3px solid var(--fit);outline-offset:2px;border-color:var(--fit)}

/* --- İMZA: randevu şeridi --- */
#pgWrap .pgk-onizleme{margin-top:20px;background:var(--fit-tint);border:1px solid var(--fit-line);
  border-radius:var(--radius-lg);padding:18px 20px}
#pgWrap .pgk-randevu{list-style:none;margin:0;padding:0;position:relative}
#pgWrap .pgk-randevu::before{content:"";position:absolute;left:26px;top:14px;bottom:14px;
  width:1px;background:var(--fit-line)}
#pgWrap .pgk-r{display:flex;align-items:center;gap:14px;padding:9px 0;position:relative}
/* Nokta ORTALAMASI flex ile: `text-align:center` boş bir <i> üzerinde
   FontAwesome'ın display kuralıyla birlikte tutmadı, nokta rayın 20 px
   solunda kaldı (ölçüldü: dot merkezi 185.5 · ray 206). */
#pgWrap .pgk-r-nok{flex:none;width:53px;display:flex;align-items:center;
  justify-content:center;position:relative;z-index:1}
#pgWrap .pgk-r-nok i{display:block;width:11px;height:11px;
  border-radius:var(--radius-circle);background:var(--fit-deep);
  box-shadow:0 0 0 4px var(--fit-tint)}
#pgWrap .pgk-r-gun{flex:none;min-width:112px;font-size:13.5px;font-weight:800;color:var(--slate);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#pgWrap .pgk-r-saat{flex:none;min-width:56px;font-size:13px;font-weight:700;color:var(--fit-deep);
  font-variant-numeric:tabular-nums}
#pgWrap .pgk-r-no{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--fit-deep);background:var(--paper);
  border:1px solid var(--fit-line);border-radius:var(--radius-pill);padding:4px 11px}
#pgWrap .pgk-r-bos{font-size:13.5px;font-weight:600;color:var(--slate-2);line-height:1.6;margin:0}
#pgWrap .pgk-bitis{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--fit-line);
  font-size:12.5px;font-weight:600;color:var(--slate-2);font-variant-numeric:tabular-nums}
#pgWrap .pgk-bitis b{color:var(--slate);font-weight:800}

/* satırlar yeniden yazılınca kısa bir vurgu — hareketten kaçınanlarda kapalı */
@media (prefers-reduced-motion: no-preference){
  #pgWrap .pgk-randevu.is-yeni .pgk-r{animation:pgkIn .34s var(--ease) backwards}
  #pgWrap .pgk-randevu.is-yeni .pgk-r:nth-child(2){animation-delay:.05s}
  #pgWrap .pgk-randevu.is-yeni .pgk-r:nth-child(3){animation-delay:.1s}
  @keyframes pgkIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

#pgWrap .pgk-alt{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
#pgWrap .pgk-not{margin:12px 0 0;font-size:12px;font-weight:500;color:var(--muted);line-height:1.55}

/* --- ÇAKIŞMA paneli: sessiz üzerine yazma yok --- */
#pgWrap .pgc-kutu{border:1.5px solid #e8d5a8;background:#fff6e6;border-radius:var(--radius-lg);padding:18px 20px}
#pgWrap .pgc-kutu h4{margin:0;font-size:15.5px;font-weight:800;color:#6b4d0c;letter-spacing:-.01em}
#pgWrap .pgc-kutu p{margin:8px 0 0;font-size:13.5px;font-weight:500;color:#6b4d0c;line-height:1.6;max-width:62ch}
#pgWrap .pgc-mevcut{margin-top:14px;background:var(--paper);border:1px solid #e8d5a8;
  border-radius:var(--radius-md);padding:12px 15px;font-size:13px;font-weight:700;color:var(--slate);
  font-variant-numeric:tabular-nums}
#pgWrap .pgc-mevcut small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px}
#pgWrap .pgc-alt{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* --- kurulmuş takvimin durum kartındaki karşılığı --- */
#pgWrap .pgk-ozet{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#pgWrap .pgk-ozet-cip{display:inline-flex;align-items:center;gap:8px;background:var(--fit-tint);
  border:1px solid var(--fit-line);border-radius:var(--radius-pill);padding:6px 13px;
  font-size:12.5px;font-weight:700;color:var(--fit-deep);font-variant-numeric:tabular-nums}
#pgWrap .pgk-ozet-cip.is-yok{background:#fff6e6;border-color:#e8d5a8;color:#8a6410}

@media (max-width:720px){
  #pgWrap .pgk-satir{flex-direction:column;gap:12px}
  #pgWrap .pgk-q{width:auto;padding-top:0}
  #pgWrap .pgk-a{flex-direction:column;align-items:stretch;gap:12px}
  #pgWrap .pgk-grup{flex:none}
  #pgWrap .pgk-alan{justify-content:space-between}
  #pgWrap .pgk-alan input{flex:1;min-width:0;max-width:190px}
  #pgWrap .pgk-cip{padding:0 11px;font-size:12.5px}
  #pgWrap .pgk-hafta{gap:5px}
  #pgWrap .pgk-r{flex-wrap:wrap;gap:10px}
  #pgWrap .pgk-r-gun{min-width:0}
  #pgWrap .pgk-r-no{margin-left:0}
  #pgWrap .pgk-randevu::before{left:26px}
}