/* =========================================================================
   pdf.css — /pdf-araclari/ çalışma ekranı
   =========================================================================
   BAĞIMLILIK: style.css → sayfa.css → BU DOSYA. Değişkenler (:root), zemin,
   üst bar ve düzyazı kuralları oradan gelir; burada yalnız aracın kendisi var.

   NEDEN AYRI DOSYA: bu kuralları site genelinde kullanan ikinci bir sayfa yok.
   style.css'e eklenseydi ana sayfayı ziyaret eden herkes boşuna indirirdi
   (aynı gerekçe sayfa.css başlığında da yazılı).

   ⚠ KÜÇÜK RESİM <img> DEĞİL <canvas>: sunucunun CSP'si `img-src 'self' data:`
   diyor, blob: adresli resim engelli. Ayrıntı js/pdf/onizleme.js başlığında.
   ========================================================================= */

.pdfarac {
  margin: var(--bosluk-lg) 0 var(--bosluk-xl);
}

/* JS yoksa görünen tek uyarı. JS geldiğinde ekran.js bunu gizler. */
.pdfarac__gerekli {
  border: 1px solid var(--renk-cizgi);
  border-left: 4px solid var(--kehribar);
  background: rgba(232,161,58,0.08);
  border-radius: var(--yuvarlak);
  padding: var(--bosluk-md);
}
.pdfarac__gerekli > :last-child { margin-bottom: 0; }

/* =========================================================================
   Dosya bırakma alanı
   ========================================================================= */
.pdfarac__birak {
  border: 2px dashed var(--renk-cizgi);
  border-radius: var(--yuvarlak);
  background: rgba(255,255,255,0.55);
  padding: var(--bosluk-lg) var(--bosluk-md);
  text-align: center;
  transition: border-color var(--gecis), background var(--gecis);
}
.pdfarac__birak--uzerinde {
  border-color: var(--petrol);
  background: rgba(43,182,196,0.10);
}
.pdfarac__birak p {
  margin: var(--bosluk-sm) 0 0;
  color: var(--renk-metin-yumusak);
  font-size: 0.95rem;
}
/* Dosya seçici düğme gibi görünsün: <input type=file> her tarayıcıda başka
   türlü çizilir, etiketi düğmeleştirmek tek tutarlı yol. */
.pdfarac__sec {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-sm);
  padding: 0.8rem 1.5rem;
  border-radius: 0.7rem;
  background: linear-gradient(160deg, var(--petrol), var(--renk-rozet));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(28,125,146,0.9);
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.pdfarac__sec:hover { transform: translateY(-2px); }
.pdfarac__sec:focus-within { outline: 3px solid var(--renk-odak); outline-offset: 2px; }
.pdfarac__sec input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* =========================================================================
   Durum satırı ve hatalar
   ========================================================================= */
.pdfarac__durum {
  min-height: 1.5em;
  margin: var(--bosluk-md) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--renk-metin-yumusak);
}
.pdfarac__durum--iyi   { color: #1d7a4c; }
.pdfarac__durum--kotu  { color: #b2354a; }
.pdfarac__durum--uyari { color: #8a5a10; }

.pdfarac__hata {
  margin-top: var(--bosluk-sm);
  border: 1px solid rgba(178,53,74,0.35);
  border-radius: 0.7rem;
  background: rgba(178,53,74,0.06);
  padding: var(--bosluk-sm) var(--bosluk-md);
  font-size: 0.95rem;
}
.pdfarac__hata-baslik { margin: 0 0 var(--bosluk-xs); font-weight: 700; }
.pdfarac__hata ul { margin: 0; padding-left: 1.2rem; }

.pdfarac__ilerleme { width: 100%; height: 0.5rem; margin-top: var(--bosluk-sm); }

/* =========================================================================
   Araç çubuğu
   ========================================================================= */
/* Tek şerit: havuz işlemleri + görünüm + indirme. Yapışkan tanımı aşağıda
   ("Yapışkan araç şeridi"), burada yalnız yerleşimi var. */
.pdfarac__cubuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-sm);
  margin-top: var(--bosluk-md);
  padding: var(--bosluk-sm);
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.7rem;
}
.pdfarac__sayim {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--renk-metin-yumusak);
  margin-left: auto;
}
.pdfarac__cubuk button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.55rem;
  background: #fff;
  color: var(--renk-metin);
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.pdfarac__cubuk button:hover { border-color: var(--petrol); background: rgba(43,182,196,0.08); }
.pdfarac__cubuk button:disabled { opacity: 0.5; cursor: default; }

/* =========================================================================
   Yapışkan araç şeridi
   =========================================================================
   Havuz uzayınca düğmeler ekrandan çıkıyordu; şerit yukarıda sabitlendi.
   `top` sitenin üst barının altına oturur. */
.pdfarac__cubuk {
  position: sticky;
  top: 0.5rem;
  z-index: 12;
  /* Yarı saydam olamaz: altından kayan kartlar okunmaz hale getirir. */
  background: #fbfaf7;
  box-shadow: 0 6px 18px -14px rgba(0,0,0,0.7);
  margin-bottom: var(--bosluk-md);
}
.pdfarac__ayrac {
  width: 1px;
  align-self: stretch;
  min-height: 1.4rem;
  background: var(--renk-cizgi);
  margin: 0 0.2rem;
}
/* Sayaç kalan boşluğu yer ki indirme düğmeleri EN SAĞDA toplansın. */
.pdfarac__cubuk .pdfarac__sayim { margin-left: auto; }

/* Düğme renkleri: sessiz olan çok, bu yüzden yalnız İKİ şey renkli.
   Birincil = işin bittiği yer (indirme). Yıkıcı = geri alınamayan
   (çıkar/boşalt) — kırmızı kenar, yanlışlıkla basmayı zorlaştırır. */
.pdfarac__cubuk .pdfarac__d--birincil {
  background: linear-gradient(160deg, var(--petrol), var(--renk-rozet));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}
.pdfarac__cubuk .pdfarac__d--birincil:hover { background: var(--petrol); border-color: transparent; }
.pdfarac__cubuk .pdfarac__d--yikici { border-color: rgba(204,63,86,0.45); color: #a8324a; }
.pdfarac__cubuk .pdfarac__d--yikici:hover { border-color: #cc3f56; background: rgba(204,63,86,0.07); }
.pdfarac__cubuk .pdfarac__d--ekle { border-color: var(--petrol); color: var(--petrol); font-weight: 600; }

.pdfarac__yogunluk { display: inline-flex; gap: 0.2rem; }
.pdfarac__yogunluk button { padding: 0.4rem 0.55rem; }
.pdfarac__yogunluk button[aria-pressed="true"],
.pdfarac__cubuk button[data-is="oniz"][aria-pressed="true"] {
  background: var(--petrol);
  border-color: var(--petrol);
  color: #fff;
}

/* =========================================================================
   Çalışma alanı — havuz solda, önizleme sağda
   ========================================================================= */
.pdfarac__alan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: var(--bosluk-lg);
  align-items: start;
}
/* Önizleme kapatılınca — ya da havuz henüz boşken — havuz bütün genişliği
   alır. Boş havuzda sağda boş bir kutu durması "bir şey eksik" hissi veriyordu. */
.pdfarac--onizsiz .pdfarac__alan,
.pdfarac--havuz-bos .pdfarac__alan { grid-template-columns: minmax(0, 1fr); }
.pdfarac--onizsiz .pdfarac__oniz,
.pdfarac--havuz-bos .pdfarac__oniz { display: none; }

.pdfarac__oniz {
  position: sticky;
  top: 4.5rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--yuvarlak);
  background: rgba(255,255,255,0.7);
  padding: var(--bosluk-md);
}
.pdfarac__oniz-baslik {
  margin: 0 0 var(--bosluk-sm);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--renk-metin-yumusak);
}
.pdfarac__oniz-kutu {
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg, #f3f2ee, #f3f2ee 8px, #eceae4 8px, #eceae4 16px);
  border-radius: 0.5rem;
  overflow: hidden;
}
.pdfarac__oniz-kutu canvas {
  max-width: 100%;
  max-height: 32rem;
  background: #fff;
  box-shadow: 0 4px 18px -8px rgba(0,0,0,0.6);
}
.pdfarac__oniz-bos {
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--renk-metin-yumusak);
  font-size: 0.9rem;
}

/* Dar ekranda yan yana durmaz: önizleme havuzun ALTINA iner. */
@media (max-width: 1000px) {
  .pdfarac__alan { grid-template-columns: minmax(0, 1fr); }
  .pdfarac__oniz { position: static; }
}

/* =========================================================================
   Sayfa havuzu
   ========================================================================= */
.pdfarac__havuz {
  list-style: none;
  margin: var(--bosluk-md) 0 0;
  padding: 0;
  display: grid;
  /* Kart tabanı yoğunluk düğmelerinden gelir; JS --kart-en'i değiştirir. */
  grid-template-columns: repeat(auto-fill, minmax(var(--kart-en, 9.5rem), 1fr));
  gap: var(--bosluk-md);
}
.pdfarac__bos {
  margin-top: var(--bosluk-md);
  color: var(--renk-metin-yumusak);
}

.pdfsayfa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-xs);
  padding: var(--bosluk-sm);
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.8rem;
  background: #fff;
  cursor: grab;
  /* Kartın kendi metni seçilmesin: sürükleme ve Shift+tık ile çakışıyor. */
  user-select: none;
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.pdfsayfa:hover { box-shadow: 0 8px 20px -14px rgba(0,0,0,0.55); }
.pdfsayfa:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 2px; }
.pdfsayfa--secili {
  border-color: #cc3f56;
  box-shadow: 0 0 0 2px rgba(204,63,86,0.25);
  background: rgba(204,63,86,0.04);
}
.pdfsayfa--tasiniyor { opacity: 0.4; }

/* Bırakma göstergesi: kartın hangi YANINA düşeceği görünsün. */
.pdfsayfa--hedef-once  { box-shadow: -3px 0 0 0 var(--petrol); }
.pdfsayfa--hedef-sonra { box-shadow:  3px 0 0 0 var(--petrol); }

.pdfsayfa__resim {
  width: 100%;
  height: 10.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg, #f3f2ee, #f3f2ee 8px, #eceae4 8px, #eceae4 16px);
  border-radius: 0.4rem;
  overflow: hidden;
}
.pdfsayfa__tuval {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 2px 8px -4px rgba(0,0,0,0.6);
  background: #fff;
}
/* 🐛 "Çizilmemiş tuval 0×0'dır" DİYE VARSAYILMIŞTI — yanlış. Ölçü verilmemiş
   bir <canvas> 300×150'dir; yukarıdaki beyaz zeminle birlikte kartın ortasında
   BEYAZ BİR KUTU oluşturuyor ve "önizleme yok" yazısının üstünü örtüyordu
   (13.08.2026, canlıda görüldü). Tuval artık çizilene kadar açıkça gizleniyor:
   varsayıma değil, JS'in eklediği --cizili sınıfına bakılıyor. */
.pdfsayfa__tuval { display: none; }
.pdfsayfa--cizili .pdfsayfa__tuval { display: block; }

/* Çizilene kadar yerinde tarama deseni durur. Çizilemezse kart yazıyla kalır. */
.pdfsayfa--resimsiz .pdfsayfa__resim::after {
  content: "önizleme yok";
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--renk-metin-yumusak);
}

.pdfsayfa__no {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.4rem;
  background: var(--renk-rozet);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-align: center;
}
.pdfsayfa__kaynak {
  width: 100%;
  font-size: 0.78rem;
  color: var(--renk-metin-yumusak);
  text-align: center;
  /* Uzun dosya adı kartı genişletmesin; ızgara bozulur. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdfsayfa__islem { display: flex; gap: 0.25rem; }
.pdfsayfa__dugme {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--renk-cizgi);
  border-radius: 0.4rem;
  background: #fff;
  color: var(--renk-metin);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.pdfsayfa__dugme:hover { border-color: var(--petrol); background: rgba(43,182,196,0.1); }
.pdfsayfa__dugme:disabled { opacity: 0.45; cursor: default; }

/* ◀ ▶ FARELİ CİHAZDA YOK — kart yüzü temiz kalsın; sıralama sürükle-bırakla
   ve Ctrl+ok ile yapılır.
   ⛔ Kural `hover: hover` ile SINIRLI ve öyle kalmalı: parmakla sürükleme
   mobil tarayıcıların çoğunda çalışmıyor, dokunmatikte ok TEK sıralama
   yoludur. Bu iki satırı medya sorgusundan çıkaran kişi telefondan giren
   herkesin sayfa sırasını değiştirmesini engellemiş olur. */
@media (hover: hover) and (pointer: fine) {
  .pdfsayfa__dugme[data-is="geri"],
  .pdfsayfa__dugme[data-is="ileri"] { display: none; }
}

/* Ayrı "eylem şeridi" KALDIRILDI (13.08.2026): indirme ve "Havuzu boşalt"
   havuzun altında duruyordu ve havuz uzayınca ekrandan çıkıyordu. İkisi de
   yukarıdaki yapışkan şeride taşındı. */

/* Uzun bir iş sürerken imleç de söylesin. */
.pdfarac--mesgul { cursor: progress; }

/* =========================================================================
   Dar ekran
   ========================================================================= */
@media (max-width: 720px) {
  /* Yalnız BAŞLANGIÇ değeri: yoğunluk düğmesine basılınca JS --kart-en'i
     öğenin kendisine yazar ve bu satırı geçer. */
  .pdfarac__havuz { --kart-en: 7.5rem; }
  .pdfsayfa__resim { height: 8rem; }
  .pdfarac__cubuk .pdfarac__sayim { margin-left: 0; width: 100%; }
  /* Parmakla sürüklemek tarayıcıların çoğunda çalışmaz; ◀ ▶ düğmeleri
     bu yüzden burada DURUR (yukarıdaki hover kuralına bak) ve daha büyüktür. */
  .pdfsayfa__dugme { width: 2.3rem; height: 2.3rem; }
  /* Şerit dar ekranda çok yer kaplamasın: indirme düğmeleri tam satır. */
  .pdfarac__cubuk .pdfarac__d--birincil,
  .pdfarac__cubuk button[data-is="ayir"] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pdfsayfa, .pdfarac__sec, .pdfarac__birak { transition: none; }
}