/* FOTOBUL - ortak stiller (panel + misafir) */

:root {
  --arka: #f6f7f9;
  --kart: #ffffff;
  --kenar: #e2e5ea;
  --metin: #1a1d21;
  --soluk: #6b7280;
  --vurgu: #2563eb;
  --vurgu-koyu: #1d4ed8;
  --basari: #059669;
  --basari-zemin: #ecfdf5;
  --hata: #dc2626;
  --hata-zemin: #fef2f2;
  --uyari: #b45309;
  --uyari-zemin: #fffbeb;
  --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --yuvarlak: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --arka: #0f1115;
    --kart: #171a21;
    --kenar: #2a2f3a;
    --metin: #e6e8ec;
    --soluk: #9aa3b2;
    --vurgu: #3b82f6;
    --vurgu-koyu: #2563eb;
    --basari-zemin: #052e23;
    --hata-zemin: #2a1113;
    --uyari-zemin: #2b1f06;
    --golge: 0 1px 3px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--arka);
  color: var(--metin);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

.kapsayici { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.dar { max-width: 440px; }

/* --- Üst bar ------------------------------------------------------------ */
.ustbar {
  background: var(--kart);
  border-bottom: 1px solid var(--kenar);
  position: sticky; top: 0; z-index: 40;
}
.ustbar .ic {
  max-width: 1180px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 22px; height: 56px;
}
.marka { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--metin); }
.marka:hover { text-decoration: none; }
.ustbar nav { display: flex; gap: 18px; flex: 1; }
.ustbar nav a { color: var(--soluk); font-weight: 500; }
.ustbar nav a.etkin, .ustbar nav a:hover { color: var(--metin); text-decoration: none; }
.kullanici { color: var(--soluk); font-size: 13px; display: flex; align-items: center; gap: 12px; }

/* --- Başlık ------------------------------------------------------------- */
.sayfa-basi {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 28px 0 18px; flex-wrap: wrap;
}
.sayfa-basi h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sayfa-basi p { margin: 4px 0 0; color: var(--soluk); font-size: 14px; }

/* --- Kart --------------------------------------------------------------- */
.kart {
  background: var(--kart); border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
}
.kart-ic { padding: 20px; }

/* --- Form --------------------------------------------------------------- */
.alan { margin-bottom: 16px; }
.alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.alan .ipucu { font-size: 12px; color: var(--soluk); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--kenar); border-radius: 8px;
  background: var(--arka); color: var(--metin);
  font: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--vurgu); outline-offset: -1px; border-color: transparent;
}
textarea { min-height: 84px; resize: vertical; }

.dugme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: 8px;
  background: var(--vurgu); color: #fff; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.dugme:hover { background: var(--vurgu-koyu); text-decoration: none; color: #fff; }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.dugme.ikincil { background: var(--kart); color: var(--metin); border-color: var(--kenar); }
.dugme.ikincil:hover { background: var(--arka); color: var(--metin); }
.dugme.tehlike { background: var(--hata); }
.dugme.kucuk { padding: 6px 11px; font-size: 13px; }

/* --- Mesaj -------------------------------------------------------------- */
.mesaj {
  padding: 11px 14px; border-radius: 8px; margin-bottom: 16px;
  font-size: 14px; border: 1px solid transparent;
}
.mesaj.basari { background: var(--basari-zemin); color: var(--basari); border-color: currentColor; }
.mesaj.hata   { background: var(--hata-zemin);   color: var(--hata);   border-color: currentColor; }
.mesaj.uyari  { background: var(--uyari-zemin);  color: var(--uyari);  border-color: currentColor; }

/* --- Tablo -------------------------------------------------------------- */
.tablo-sar { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liste th, table.liste td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--kenar);
  white-space: nowrap;
}
table.liste th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); font-weight: 600; }
table.liste tbody tr:last-child td { border-bottom: none; }
table.liste tbody tr:hover { background: var(--arka); }

/* --- Rozet -------------------------------------------------------------- */
.rozet {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--kenar);
  color: var(--soluk); background: var(--arka);
}
.rozet.yayinda      { color: var(--basari); background: var(--basari-zemin); border-color: currentColor; }
.rozet.indeksleniyor{ color: var(--uyari);  background: var(--uyari-zemin);  border-color: currentColor; }
.rozet.hata         { color: var(--hata);   background: var(--hata-zemin);   border-color: currentColor; }

/* --- Boş durum ---------------------------------------------------------- */
.bos {
  text-align: center; padding: 56px 24px; color: var(--soluk);
}
.bos h3 { margin: 0 0 6px; color: var(--metin); font-size: 17px; }
.bos p { margin: 0 0 18px; font-size: 14px; }

/* --- Kod / kutu --------------------------------------------------------- */
.kod {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--arka); border: 1px solid var(--kenar);
  padding: 2px 7px; border-radius: 6px; font-size: 13px;
}
.buyuk-kod {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: .18em;
}

/* --- İlerleme ----------------------------------------------------------- */
.ilerleme {
  height: 8px; background: var(--kenar); border-radius: 999px; overflow: hidden;
}
.ilerleme > span {
  display: block; height: 100%; background: var(--vurgu);
  transition: width .4s ease;
}

/* --- Fotoğraf ızgarası -------------------------------------------------- */
.izgara {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.izgara figure {
  margin: 0; position: relative; aspect-ratio: 1;
  background: var(--kenar); border-radius: 8px; overflow: hidden;
}
.izgara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.izgara figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 8px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  display: flex; justify-content: space-between; gap: 6px;
}
.izgara .durum-noktasi {
  position: absolute; top: 7px; right: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.durum-bekliyor  { background: #9ca3af; }
.durum-isleniyor { background: #f59e0b; }
.durum-tamam     { background: #10b981; }
.durum-hata      { background: #ef4444; }

/* --- Bırakma alanı ------------------------------------------------------ */
.birak {
  border: 2px dashed var(--kenar); border-radius: var(--yuvarlak);
  padding: 40px 24px; text-align: center; color: var(--soluk);
  background: var(--kart); transition: border-color .15s, background .15s;
}
.birak.uzerinde { border-color: var(--vurgu); background: var(--basari-zemin); }
.birak h3 { margin: 0 0 6px; color: var(--metin); font-size: 16px; }
.birak p { margin: 0 0 14px; font-size: 13px; }

/* --- Yardımcı ----------------------------------------------------------- */
.satir { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ikili { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .ikili { grid-template-columns: 1fr; } }
.soluk { color: var(--soluk); }
.kucuk-yazi { font-size: 13px; }
.sag { text-align: right; }
.bosluk-ust { margin-top: 20px; }