/* =============================================================================
   pizzatat.com — SITE
   =============================================================================
   Tek dosya, bagimlilik yok (bootstrap YOK). Nedeni: tarif sayfasi mobilde
   mutfakta aciliyor; 200 KB cerceve indirmek anlamsiz. Tum olcuye duyarli
   duzen CSS grid ile.

   Tasarim degiskenleri :root'ta; koyu mod prefers-color-scheme ile otomatik.
   ========================================================================== */

:root{
  --bg:#fffdfb; --surface:#fff; --border:#eae4de; --text:#221c18;
  --muted:#7d746d; --accent:#c8461e; --accent-soft:#fdf0eb;
  --ok:#1f7a4d; --warn:#b4741c; --radius:14px;
  --wrap:1120px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#17130f; --surface:#211b16; --border:#332a23; --text:#f2ece6;
         --muted:#a89d94; --accent:#f2764a; --accent-soft:#2b1d16; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
      font-size:16px; line-height:1.6; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ line-height:1.25; margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:clamp(26px,4vw,38px); }
h2{ font-size:clamp(20px,2.6vw,26px); }
h3{ font-size:17px; }
.pz-muted{ color:var(--muted); font-size:14px; }
.pz-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.pz-narrow{ max-width:620px; }
.pz-center{ text-align:center; }

/* Klavye kullanicisi icin atlama baglantisi — gorunur hale yalnizca odakta */
.pz-skip{ position:absolute; left:-9999px; }
.pz-skip:focus{ left:16px; top:10px; z-index:99; background:var(--accent);
                color:#fff; padding:8px 14px; border-radius:8px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------------------------------------------------------------- UST BANT */
.pz-top{ position:sticky; top:0; z-index:40; background:var(--surface);
         border-bottom:1px solid var(--border); }
.pz-top-in{ display:flex; align-items:center; gap:14px; height:62px; }
.pz-logo{ font-weight:800; font-size:21px; letter-spacing:-.03em; flex:0 0 auto; }
.pz-logo span{ color:var(--accent); }
.pz-logo-sm{ font-size:18px; }

.pz-search{ flex:1; display:flex; min-width:0; }
.pz-search input{ flex:1; min-width:0; font:inherit; font-size:14.5px;
  padding:9px 13px; border:1px solid var(--border); border-right:0;
  border-radius:10px 0 0 10px; background:var(--bg); color:var(--text); }
.pz-search button{ font:inherit; padding:9px 14px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; border-radius:0 10px 10px 0; cursor:pointer;
  display:grid; place-items:center; }
.pz-search-lg input,.pz-search-lg button{ font-size:16px; padding:14px 18px; }
.pz-search-lg{ max-width:560px; margin:18px auto 0; }

.pz-nav{ display:flex; gap:6px; flex:0 0 auto; }
.pz-nav a{ font-size:14px; padding:8px 12px; border-radius:9px; white-space:nowrap; }
.pz-nav a:hover{ background:var(--accent-soft); color:var(--accent); }
.pz-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.pz-burger span{ display:block; width:20px; height:2px; background:var(--text); margin:4px 0; }

@media(max-width:760px){
  .pz-top-in{ flex-wrap:wrap; height:auto; padding:10px 16px; }
  .pz-search{ order:3; flex-basis:100%; }
  .pz-nav{ display:none; }
  body.pz-menu-open .pz-nav{ display:flex; order:4; flex-basis:100%; }
  .pz-burger{ display:block; margin-left:auto; }
}

/* ------------------------------------------------------------------- HERO */
.pz-hero{ background:linear-gradient(180deg,var(--accent-soft),transparent);
          padding:44px 0 34px; text-align:center; }
.pz-hero h1 em{ color:var(--accent); font-style:normal; }
.pz-hero p{ max-width:600px; margin:0 auto; color:var(--muted); font-size:16.5px; }
.pz-hero-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
                max-width:840px; margin:26px auto 0; text-align:left; }
.pz-hero-tools a{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; }
.pz-hero-tools a:hover{ border-color:var(--accent); }
.pz-hero-tools b{ display:block; font-size:15px; }
.pz-hero-tools span{ font-size:13px; color:var(--muted); }
@media(max-width:700px){ .pz-hero-tools{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------ BOLUM */
.pz-sechead{ margin:36px 0 16px; }
.pz-sechead p{ margin:0; max-width:680px; }
.pz-crumb{ display:flex; gap:7px; align-items:center; flex-wrap:wrap;
           font-size:13px; color:var(--muted); padding-top:16px; }
.pz-crumb a:hover{ color:var(--accent); }

.pz-chips-row{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.pz-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border:1px solid var(--border); border-radius:999px; font-size:13.5px;
  background:var(--surface); }
.pz-chip:hover{ border-color:var(--accent); color:var(--accent); }
.pz-chip span{ color:var(--muted); font-size:12px; }
.pz-chip-sm{ padding:5px 11px; font-size:12.5px; }

/* ------------------------------------------------------------------ KARTLAR */
.pz-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
          gap:16px; }
.pz-card{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:transform .12s; }
.pz-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.pz-card-img{ position:relative; aspect-ratio:4/3; background:var(--accent-soft);
              display:grid; place-items:center; }
.pz-card-img img{ width:100%; height:100%; object-fit:cover; }
/* Gorseli olmayan yemek: sahte fotograf yerine tipografik kapak */
.pz-card-ph{ font-size:34px; font-weight:800; color:var(--accent); opacity:.4; }
.pz-badge{ position:absolute; left:8px; top:8px; background:var(--accent);
  color:#fff; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; }
.pz-card-body{ padding:11px 13px 14px; }
.pz-card-body h3{ margin:0 0 3px; font-size:15.5px; }

.pz-cats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.pz-cats a{ display:flex; justify-content:space-between; align-items:center;
  padding:13px 15px; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; font-size:15px; }
.pz-cats a:hover{ border-color:var(--accent); color:var(--accent); }

/* ------------------------------------------------------------------ YAZI */
.pz-article{ padding-bottom:50px; }
.pz-arthead{ margin:12px 0 18px; }
.pz-lead{ font-size:17px; color:var(--muted); max-width:720px; }
.pz-facts{ display:flex; gap:9px; flex-wrap:wrap; margin-top:10px; }
.pz-facts span{ font-size:13.5px; padding:6px 12px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; }
.pz-facts b{ font-weight:700; }
.pz-facts em{ font-style:normal; color:var(--muted); font-size:12px; }
.pz-fact-hi{ background:var(--accent-soft) !important; border-color:var(--accent) !important;
             color:var(--accent); }
.pz-facts-sm span{ font-size:12.5px; padding:4px 10px; }

.pz-hero-img{ margin:0 0 22px; }
.pz-hero-img img{ width:100%; border-radius:var(--radius); aspect-ratio:16/9; object-fit:cover; }
.pz-credit{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.pz-credit a{ text-decoration:underline; }

/* -------------------------------------------------- TARIF: MALZEME + ADIM */
.pz-recipe{ display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
            gap:32px; align-items:start; margin-top:8px; }
@media(max-width:860px){ .pz-recipe{ grid-template-columns:1fr; gap:26px; } }

.pz-ing{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; position:sticky; top:78px; }
@media(max-width:860px){ .pz-ing{ position:static; } }
.pz-ing-head h2{ margin:0; font-size:19px; }

/* PORSIYON OLCEKLEYICI — rakiplerde olmayan ozellik */
.pz-scaler{ display:flex; align-items:center; gap:7px; margin-top:10px;
  padding:7px 10px; background:var(--accent-soft); border-radius:999px;
  width:fit-content; }
.pz-scaler button{ width:27px; height:27px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:17px; line-height:1;
  cursor:pointer; }
.pz-scaler button:hover{ border-color:var(--accent); color:var(--accent); }
.pz-scaler output{ min-width:22px; text-align:center; font-weight:700;
                   font-variant-numeric:tabular-nums; }

.pz-ing-list{ list-style:none; margin:14px 0 0; padding:0; }
.pz-ing-list li{ display:flex; gap:10px; padding:7px 0;
                 border-bottom:1px solid var(--border); font-size:15px; }
.pz-ing-list li:last-child{ border-bottom:0; }
.pz-ing-group{ font-size:11.5px !important; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); border-bottom:0 !important;
  padding-top:14px !important; }
.pz-qty{ flex:0 0 auto; min-width:86px; font-variant-numeric:tabular-nums;
         color:var(--accent); font-weight:600; }
/* Olceklenmis miktar kisaca vurgulanir: kullanici degisimi gorsun */
.pz-qty.pz-changed{ animation:pzflash .5s ease; }
@keyframes pzflash{ from{ background:var(--accent-soft); } to{ background:transparent; } }
.pz-ing-list em{ font-style:normal; color:var(--muted); font-size:13px; }
.pz-opt{ opacity:.72; }
.pz-ing-acts{ margin-top:14px; }

.pz-steps-head{ display:flex; justify-content:space-between; align-items:center;
                gap:12px; flex-wrap:wrap; }
.pz-steps-head h2{ margin:0; }
.pz-step-list{ counter-reset:pzs; list-style:none; margin:14px 0 0; padding:0; }
.pz-step-list li{ counter-increment:pzs; position:relative; padding:0 0 18px 44px;
                  border-left:2px solid var(--border); margin-left:14px; }
.pz-step-list li:last-child{ border-left-color:transparent; padding-bottom:0; }
.pz-step-list li::before{ counter-reset:none; content:counter(pzs);
  position:absolute; left:-15px; top:0; width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:13px; font-weight:700;
  display:grid; place-items:center; }
.pz-step-txt{ font-size:15.5px; }
.pz-timer{ display:inline-block; margin-top:6px; font-size:12px; padding:3px 10px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent);
  font-variant-numeric:tabular-nums; }
.pz-step-list img{ margin-top:10px; border-radius:11px; }

.pz-note{ margin-top:20px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); }
.pz-note b{ display:block; margin-bottom:4px; }
.pz-note p{ margin:0; font-size:14.5px; color:var(--muted); }
.pz-backlink{ margin-top:26px; font-size:15px; }
.pz-backlink a{ color:var(--accent); text-decoration:underline; }

/* ------------------------------------------- VARYANT KARSILASTIRMASI */
.pz-variants{ margin-top:46px; padding-top:30px; border-top:1px solid var(--border); }
.pz-vtabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.pz-vtab{ font:inherit; font-size:13.5px; padding:8px 14px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  color:var(--text); }
.pz-vtab.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pz-vtab em{ font-style:normal; font-size:11px; opacity:.7; margin-left:5px; }

.pz-table-wrap{ overflow-x:auto; border:1px solid var(--border);
                border-radius:var(--radius); background:var(--surface); }
.pz-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pz-table th,.pz-table td{ padding:9px 13px; text-align:left;
                           border-bottom:1px solid var(--border); white-space:nowrap; }
.pz-table thead th{ font-size:12.5px; text-transform:uppercase; letter-spacing:.4px;
                    color:var(--muted); background:var(--bg); }
.pz-table tbody th{ font-weight:600; }
.pz-table td{ text-align:center; }
/* Malzeme sutunu yatay kaydirmada SABIT kalir. 11 cesitli bir yemekte
   (manti) tablo ekrana sigmiyor; sabitlenmezse kullanici saga kaydirinca
   hangi malzemenin satirinda oldugunu kaybediyor. */
.pz-table th:first-child{ position:sticky; left:0; z-index:1;
                          background:var(--surface); }
.pz-table thead th:first-child{ z-index:2; background:var(--bg); }
.pz-table th:first-child::after{ content:''; position:absolute; top:0; right:0;
                                 bottom:0; width:1px; background:var(--border); }
.pz-yes{ color:var(--ok); font-weight:700; }
.pz-no{ color:var(--border); }

.pz-vlist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
           gap:14px; margin-top:20px; }
.pz-vitem{ background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; }
.pz-vitem h3{ margin:0 0 6px; }
.pz-vitem p{ margin:8px 0 12px; font-size:14px; }

/* ------------------------------------------------------------- FILTRE */
.pz-filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
             margin:16px 0 22px; }
.pz-filters label{ display:flex; flex-direction:column; gap:4px; font-size:13px;
                   color:var(--muted); }
.pz-filters select{ font:inherit; font-size:14.5px; padding:8px 11px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface);
  color:var(--text); }

/* -------------------------------------------------------------- GENEL */
.pz-btn{ display:inline-block; font:inherit; font-size:14.5px; padding:10px 17px;
  border-radius:10px; border:1px solid var(--accent); background:var(--accent);
  color:#fff; cursor:pointer; }
.pz-btn:hover{ filter:brightness(1.06); }
.pz-btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border); }
.pz-btn-ghost:hover{ border-color:var(--accent); color:var(--accent); filter:none; }

.pz-empty{ padding:26px; text-align:center; background:var(--surface);
  border:1px dashed var(--border); border-radius:var(--radius); color:var(--muted); }
.pz-empty b{ display:block; color:var(--text); margin-bottom:4px; }

.pz-warn{ padding:13px 16px; border-radius:var(--radius); font-size:14px;
  background:rgba(180,116,28,.10); border:1px solid rgba(180,116,28,.32);
  margin-bottom:20px; }
.pz-warn b{ display:block; margin-bottom:3px; }

/* --------------------------------------------------------------- FOOTER */
.pz-foot{ margin-top:54px; background:var(--surface);
          border-top:1px solid var(--border); padding:34px 0 18px; }
.pz-foot-in{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px; }
@media(max-width:700px){ .pz-foot-in{ grid-template-columns:1fr; gap:18px; } }
.pz-foot-in p{ margin:8px 0 0; max-width:340px; }
.pz-foot-in nav{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.pz-foot-in nav b{ margin-bottom:3px; }
.pz-foot-in nav a:hover{ color:var(--accent); }
.pz-foot-bottom{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-top:26px; padding-top:14px; border-top:1px solid var(--border); }

/* Yazdirma: mutfakta kagit kullanan icin. Ust bant, footer ve butonlar gider. */
@media print{
  .pz-top,.pz-foot,.pz-ing-acts,.pz-steps-head .pz-btn,.pz-scaler,
  .pz-variants,.pz-crumb,.pz-hero-tools{ display:none !important; }
  .pz-recipe{ grid-template-columns:1fr; }
  .pz-ing{ position:static; border:0; padding:0; }
  body{ background:#fff; color:#000; font-size:12pt; }
}

/* =============================================================================
   ARAÇ SAYFALARI  (arama · buzdolabı · pişirme modu · liste · haftalık menü)
   ========================================================================== */

.pz-group-title{ font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); margin-bottom:6px; }

/* Buzdolabı modu: seçilebilir malzeme etiketleri */
.pz-pick{ font:inherit; cursor:pointer; }
.pz-pick.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pz-pick.on span{ color:rgba(255,255,255,.75); }
.pz-badge-ok{ background:var(--ok) !important; }
.pz-badge-warn{ background:var(--warn) !important; }

/* Haftalık menü */
.pz-week{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.pz-day-name{ font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--accent); margin-bottom:6px; }

/* Alışveriş listesi */
.pz-list-group{ margin-bottom:18px; }
.pz-list-group > b{ display:block; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); margin-bottom:6px; }
.pz-list-item{ display:flex; align-items:center; gap:11px; padding:10px 0;
  border-bottom:1px solid var(--border); }
.pz-list-item:last-child{ border-bottom:0; }
.pz-list-item input{ width:19px; height:19px; accent-color:var(--accent); flex:0 0 auto; }
.pz-list-item.done{ opacity:.45; }
.pz-list-item.done .nm{ text-decoration:line-through; }
.pz-list-item .qty{ min-width:92px; color:var(--accent); font-weight:600;
                    font-variant-numeric:tabular-nums; font-size:14px; }
.pz-list-item .nm{ flex:1; font-size:15px; }
.pz-list-item .rm{ background:none; border:0; color:var(--muted); cursor:pointer;
                   font-size:17px; line-height:1; padding:2px 6px; }
.pz-list-item .rm:hover{ color:var(--accent); }
.pz-list-from{ font-size:11.5px; color:var(--muted); }

/* -----------------------------------------------------------------------------
   PİŞİRME MODU — mutfakta, tezgahta, elin hamurluyken kullanılır.
   Bu yüzden: tam ekran, büyük punto, büyük dokunma alanları, üst bant yok.
   -------------------------------------------------------------------------- */
.pz-cook{ position:fixed; inset:0; z-index:60; background:var(--bg);
  display:flex; flex-direction:column; }
.pz-cook-top{ display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border); background:var(--surface); }
.pz-cook-top b{ flex:1; font-size:15px; overflow:hidden; text-overflow:ellipsis;
                white-space:nowrap; }
.pz-cook-back{ font-size:14px; color:var(--accent); font-weight:600; }
.pz-cook-wake{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.pz-cook-wake.on{ background:var(--ok); box-shadow:0 0 0 3px rgba(31,122,77,.18); }

.pz-cook-ing{ border-bottom:1px solid var(--border); background:var(--surface); }
.pz-cook-ing summary{ padding:11px 16px; cursor:pointer; font-size:14px;
                      font-weight:600; }
.pz-cook-ing ul{ list-style:none; margin:0; padding:0 16px 14px; }
.pz-cook-ing li{ padding:5px 0; font-size:14.5px; border-bottom:1px solid var(--border); }
.pz-cook-ing li:last-child{ border-bottom:0; }
.pz-cook-ing li b{ color:var(--accent); margin-right:7px;
                   font-variant-numeric:tabular-nums; }

.pz-cook-stage{ flex:1; overflow:hidden; position:relative; }
.pz-cook-step{ position:absolute; inset:0; display:none; flex-direction:column;
  justify-content:center; padding:24px 22px; overflow-y:auto; }
.pz-cook-step.on{ display:flex; }
.pz-cook-no{ font-size:12.5px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
/* Punto ekranla birlikte buyur: tezgahtan bakarken okunmali */
.pz-cook-step p{ margin:0; font-size:clamp(20px,3.4vw,30px); line-height:1.45;
                 max-width:760px; }
.pz-timer-btn{ margin-top:22px; align-self:flex-start; font-size:16px;
               padding:13px 20px; }
.pz-timer-btn.running{ background:var(--warn); border-color:var(--warn); }

.pz-cook-nav{ display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-top:1px solid var(--border); background:var(--surface); }
.pz-cook-nav .pz-btn{ min-width:92px; padding:13px 18px; font-size:15px; }
.pz-cook-dots{ flex:1; display:flex; gap:6px; justify-content:center; }
.pz-cook-dots i{ width:7px; height:7px; border-radius:50%; background:var(--border);
                 display:block; }
.pz-cook-dots i.on{ background:var(--accent); }

/* Pişirme modu yazdırılmaz; zaten ekran için */
@media print{ .pz-cook{ display:none; } }

/* -----------------------------------------------------------------------------
   ÇEŞİT SEÇİCİ — yemek sayfasının en üstü
   Sayfa yemeğin adını taşır ("Mantı") ama içerik bir ÇEŞİDİN tarifidir.
   Okuyucu hangisini okuduğunu buradan görür ve tek tıkla değiştirir.
   -------------------------------------------------------------------------- */
.pz-picker{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
            margin:14px 0 4px; }
.pz-picker-lbl{ font-size:12.5px; color:var(--muted); margin-right:2px; }
.pz-pv{ font-size:13.5px; padding:6px 13px; border-radius:999px;
        border:1px solid var(--border); background:var(--surface); }
.pz-pv:hover{ border-color:var(--accent); color:var(--accent); }
.pz-pv.on{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Okunan tarifin adı — malzemelerin hemen üstünde */
.pz-nowreading{ margin:22px 0 2px; padding-top:18px;
                border-top:1px solid var(--border); }
.pz-nowreading h2{ margin:0 0 3px; font-size:22px; }
.pz-nowreading p{ margin:0; font-size:13.5px; }

/* Alttaki sekmeler artık bağlantı; buton görünümü korunuyor */
a.pz-vtab{ display:inline-block; text-decoration:none; }