/* ===================== GLOBAL & TOKENS ===================== */
:root{
  --wrap: 1200px;           /* TEK MERKEZ genişlik */
  --pad : 12px;             /* TEK MERKEZ yatay padding */
  --topbar-h: 56px;

  --card-radius: 16px;
  --glow-color: rgba(37, 99, 235, .9);
  --glow-soft : rgba(37, 99, 235, .25);
  --border-w  : 2px;

  --bg   : #ffffff;
  --text : #0f172a;
  --muted: #64748b;
}

html,body{height:100%;}
*{box-sizing:border-box;}
body{
  margin:0;
  background:#fff;
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* Her bölümde aynı hizayı sağlayan kaplar */
.topbar-inner,
.topbar__inner,
.container{
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.container{
  padding-top: 24px;
  padding-bottom: 56px;
  min-height: 85vh;
}

/* ===================== TOPBAR ===================== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid #eaf0ff;
  box-shadow: 0 1px 12px rgba(2,6,23,.06);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height: var(--topbar-h);
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar-spacer{ display:none; }
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#60a5fa,#6366f1);
  display:grid; place-items:center; color:#fff; font-weight:800;
  box-shadow:0 8px 24px rgba(99,102,241,.35);
}
.title{ font-weight:700; letter-spacing:.2px; color:#0f172a; }
.topbar-nav{ margin-left:auto; display:flex; align-items:center; }
.topbar-link{
  font-weight:600; font-size:.95rem; text-decoration:none; color:#1d4ed8; margin-left:20px;
}

/* ===================== FİLTRE BAR ===================== */
.topbar_filter{
  position: sticky;
  top: var(--topbar-h);
  z-index: 90;
  background:#fff;
  border-bottom: 1px solid #eef2ff;
  padding: 10px 0;        /* yatay padding kapsayıcıdan geliyor */
  margin: 0 0 16px 0;     /* negatif margin KALDIRILDI */
}
.topbar__inner{
  display:flex; gap:12px; align-items:center;
}

/* Filtre buton grupları */
.filters{ display:flex; align-items:center; gap:10px; }
.seg{
  display:flex; gap:6px; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; padding:4px; box-shadow:0 2px 10px rgba(2,6,23,.04);
}
.seg button{
  appearance:none; border:0; background:transparent; color:#0f172a;
  font-weight:600; font-size:13px; padding:8px 12px; border-radius:9px; cursor:pointer;
}
.seg button.is-active{
  background:#eff6ff; border:1px solid #60a5fa; color:#0b1220;
}
.subseg{
  display:flex; gap:6px; background:#fff; border:1px dashed #dbeafe;
  border-radius:12px; padding:4px; box-shadow:0 2px 10px rgba(2,6,23,.03);
}
.subseg[hidden]{ display:none; }
.subseg button{
  appearance:none; border:0; background:transparent; color:#0f172a;
  font-weight:600; font-size:12px; padding:6px 10px; border-radius:9px; cursor:pointer;
}
.subseg button.is-active{
  background:#eef2ff; border:1px solid #a5b4fc;
}

/* Sağ taraftaki araçlar */
.righttools{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.catfilter select{
  appearance:none; border:1px solid #e5e7eb; border-radius:12px;
  padding:8px 12px; font-size:13px; background:#fff; color:#0f172a;
  box-shadow:0 2px 10px rgba(2,6,23,.04);
}
.search{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding: 8px 12px; min-width:220px; max-width:320px; width:100%;
  box-shadow: 0 4px 10px rgba(2,6,23,.04);
}
.search input{
  border:0; outline:0; width:100%; font-size:14px; background:transparent; color:var(--text);
}

@media (max-width: 900px){
  .filters{ display:none; }
  .topbar_filter{ position: static; }
  .righttools{ width:100%; gap:8px; }
  .catfilter{ flex:0 0 auto; }
  .search{ flex:1 1 auto; }
}

/* ===================== METİN KART GRID ===================== */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

/* Kart */
.prompt-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--bg);
  border-radius: var(--card-radius);
  min-height:88px;
  cursor:pointer;
  border: var(--border-w) solid rgba(59,130,246,.20);
  box-shadow:
    0 0 0 0 rgba(59,130,246,0),
    0 1px 0 rgba(15,23,42,.05),
    0 6px 18px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
}
.prompt-card *{ text-decoration:none; }
.prompt-card:hover{
  transform: translateY(-1px);
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 24px 0 var(--glow-soft), 0 10px 28px rgba(2,6,23,.09);
}
.prompt-title{
  position:relative; z-index:1;
  font-weight:600; font-size:14px; color:#0b1220;
  margin-top: 40px;
  margin-bottom: 30px;
}
.prompt-subtle{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
  opacity:0; transition: opacity .25s ease;
}
.prompt-card:hover .prompt-subtle{ opacity:1; }

/* ===================== ROZETLER ===================== */
.badges{
  position:absolute; top:8px; right:8px; z-index:3;
  display:flex; gap:6px; align-items:center;
  pointer-events:none;
}
.badge{
  font-size:11px; font-weight:800; letter-spacing:.2px;
  padding:4px 8px; border-radius:999px;
  color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 12px rgba(2,6,23,.25);
  user-select:none; backdrop-filter: blur(2px);
}
.badge--prompt{ background: rgba(15,23,42,.85); }
.badge--price.free{ background: rgba(16,185,129,.85); }
.badge--price.paid{ background: rgba(147,51,234,.85); }

/* ===================== GÖRSELLİ KART GRID ===================== */
.imggrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
@media (min-width: 780px){ .imggrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1040px){ .imggrid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.imgcard{ perspective: 1000px; }
.imgcard__inner{
  position:relative; width:100%; height:0; padding-bottom:66.666%;
  transform-style: preserve-3d; transition: transform .5s ease;
  border-radius: var(--card-radius);
  box-shadow: 0 1px 0 rgba(15,23,42,.05), 0 6px 18px rgba(2,6,23,.06);
}
.imgcard.is-flipped .imgcard__inner{ transform: rotateY(180deg); }

.imgcard__face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius: var(--card-radius); overflow:hidden;
  border: var(--border-w) solid rgba(59,130,246,.20);
}
.imgcard__front{ background:#f8fafc; }
.imgthumb{ position:absolute; inset:0; object-fit: cover; width:100%; height:100%; }
.imgfront__overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15,23,42,.28) 48%, rgba(15,23,42,.55) 100%);
  color:#fff; font-weight:600; font-size:14px;
}
.imgcard:hover .imgcard__face{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 24px 0 var(--glow-soft);
}
.imgcard__back{
  background:#ffffff; transform: rotateY(180deg);
  display:flex; flex-direction:column; gap:10px; padding:12px;
}
.imgtitle{ font-size:14px; font-weight:700; color:#0b1220; margin:0; }
.imgprompt{
  font-size:13px; color:#0f172a; line-height:1.45;
  max-height: calc(100% - 64px); overflow:auto; padding-right:2px;
}
.imgactions{ margin-top:auto; display:flex; gap:8px; }
.btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#0b1220;
  border-radius:10px; padding:8px 10px; font-size:12px; font-weight:600; cursor:pointer;
}
.btn:hover{ border-color:#cbd5e1; }
.btn.primary{ border-color:#60a5fa; background:#eff6ff; }
.btn.inspect{ text-decoration: none; }

/* Dikey görseller (9:16) */
.imggrid-portrait{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
@media (min-width: 780px){ .imggrid-portrait{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1040px){ .imggrid-portrait{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.imgcard--portrait .imgcard__inner{ padding-bottom: 177.78%; }

/* Küçük yardımcılar */
.muted{ color: var(--muted); font-size:14px; }


/* ===================== BLOG DETAIL ===================== */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted); margin-bottom:14px;
}
.breadcrumb a{ color:#475569; text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .current{ color:#0f172a; font-weight:600; }

.blog-article{
  background:#fff;
  border:1px solid #eef2ff;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 20px rgba(2,6,23,.06);
  padding: 18px;
}

.blog-header{ margin-bottom:10px; }
.blog-title{
  margin:0 0 6px 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height:1.2;
  color:#0f172a;
  letter-spacing:.2px;
}
.blog-meta{
  font-size:13px;
  color:var(--muted);
  display:flex; align-items:center; gap:6px;
}

/* Kapak görseli */
.blog-cover{
  margin:14px 0 0 0;
  border-radius:12px;
  overflow:hidden;
  background:#f8fafc;
  border:1px solid #eaf0ff;
}
.blog-cover img{
  display:block; width:100%; height:auto;
}

/* Tipografi (prose) */
.prose{
  margin-top:16px;
  color:#0f172a;
  font-size:17px;
  line-height:1.7;
}
.prose p{ margin: 0 0 14px 0; }
.prose h2{ font-size: clamp(18px, 2vw, 24px); margin:22px 0 10px; line-height:1.25; }
.prose h3{ font-size: clamp(16px, 1.6vw, 20px); margin:18px 0 8px; }
.prose ul, .prose ol{ margin:10px 0 14px 22px; }
.prose blockquote{
  margin:14px 0; padding:12px 14px; border-left:4px solid #a5b4fc;
  background:#f8fafc; color:#0b1220; border-radius:10px;
}
.prose a{ color:#1d4ed8; text-decoration:underline; }
.prose img{ max-width:100%; height:auto; border-radius:10px; }

/* Kod blokları */
.prose pre{
  background:#0b1220; color:#e2e8f0;
  padding:12px; border-radius:12px; overflow:auto; font-size:14px;
}
.prose code{ background:#f1f5f9; padding:2px 6px; border-radius:6px; }

/* Footer */
.blog-footer{
  margin-top:18px; display:flex; gap:10px; flex-wrap:wrap;
}
.blog-footer .btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#0b1220;
  border-radius:10px; padding:9px 12px; font-size:13px; font-weight:600; cursor:pointer;
}
.blog-footer .btn:hover{ border-color:#cbd5e1; }
.blog-footer .btn.share{ background:#eef2ff; border-color:#a5b4fc; }






:root{
  --pmd-bg:#fff;
  --pmd-text:#0f172a;
  --pmd-muted:#64748b;
  --pmd-bdr:#e5e7eb;
  --pmd-indigo:#6366f1;
  --pmd-indigo-50:#eef2ff;
  --pmd-green-50:#ecfdf5;
  --pmd-green:#047857;
  --pmd-purple-50:#f5f3ff;
  --pmd-purple:#6d28d9;
}

.pmd-root{min-height:100vh;background:var(--pmd-bg);color:var(--pmd-text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;}
.pmd-topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(4px);border-bottom:1px solid #eef2ff;}
.pmd-topbar__inner{max-width:1040px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:8px}
.pmd-crumb{font-size:13px;color:#475569}
.pmd-crumb--link{color:#334155;text-decoration:none}
.pmd-crumb--link:hover{text-decoration:underline}
.pmd-crumb--current{color:#0f172a;font-weight:600}
.pmd-crumb-sep{color:#cbd5e1}

.pmd-hero{max-width:1040px;margin:0 auto;padding:20px 16px 8px}
.pmd-title{font-size:26px;line-height:1.25;font-weight:800;margin:0 0 8px}
.pmd-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.pmd-badge{font-size:12px;font-weight:700;border:1px solid var(--pmd-bdr);padding:6px 10px;border-radius:999px;background:#fff;color:#0f172a;box-shadow:0 1px 0 rgba(15,23,42,.04)}
.pmd-badge--free{background:var(--pmd-green-50);border-color:#a7f3d0;color:var(--pmd-green)}
.pmd-badge--paid{background:var(--pmd-purple-50);border-color:#ddd6fe;color:var(--pmd-purple)}
.pmd-summary{color:var(--pmd-muted);font-size:14px;max-width:760px;margin:4px 0 0}

.pmd-main{max-width:1040px;margin:0 auto;padding:16px;display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 1024px){
  .pmd-main{grid-template-columns:2fr 1fr}
}
.pmd-left{display:grid;gap:14px}
.pmd-right{display:grid;gap:14px}

.pmd-card{background:#fff;border:1px solid #eef2ff;border-radius:16px;box-shadow:0 1px 0 rgba(15,23,42,.04),0 6px 16px rgba(2,6,23,.06);padding:12px}
.pmd-card__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pmd-card__title{font-size:15px;font-weight:700;margin:0}
.pmd-card__title--sm{font-size:14px}

.pmd-actions{display:flex;gap:8px}
.pmd-btn{appearance:none;border:1px solid var(--pmd-bdr);background:#fff;color:#0f172a;border-radius:10px;padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer}
.pmd-btn:hover{background:#f8fafc}
.pmd-btn--buy{border-color:#ddd6fe;background:var(--pmd-purple-50);color:var(--pmd-purple);text-decoration:none}
.pmd-btn--buy:hover{filter:brightness(1.03)}

.pmd-code{white-space:pre-wrap;font-size:13px;background:#f8fafc;border:1px solid var(--pmd-bdr);border-radius:12px;padding:10px}

.pmd-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pmd-ph{display:grid;place-items:center;border:1px dashed #e2e8f0;border-radius:12px;background:#f1f5f9;color:#94a3b8;font-size:12px}
.pmd-ph--32{aspect-ratio:3/2}
.pmd-ph--916{aspect-ratio:9/16}
.pmd-ph--11{aspect-ratio:1/1}
.pmd-extract{border:1px solid var(--pmd-bdr);border-radius:12px;padding:10px;background:#fff;font-size:14px;color:#0f172a;white-space:pre-wrap}

.pmd-hints {
  display: flex;
  flex-direction: column; /* 🔥 Satır yerine sütun yapar */
  gap: 1rem; /* Kutular arasında dikey boşluk */
  margin-top:10px;
}
@media (min-width: 680px){
  .pmd-hints{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pmd-hint {
  background: #f8f9fc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.pmd-hint__label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #1e293b;
}
.pmd-hint__list {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0;
  
  color: #334155;
  line-height: 1.6;
  white-space: pre-line; /* Satır sonlarını korur */
}
.pmd-hint__list li{margin:2px 0}

.pmd-meta{display:grid;gap:8px;font-size:14px}
.pmd-meta__row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed #e2e8f0;padding:6px 0}
.pmd-tags{display:flex;flex-wrap:wrap;gap:6px}
.pmd-tag{font-size:12px;border:1px solid var(--pmd-bdr);border-radius:999px;padding:5px 9px;background:#fff;color:#334155}
.pmd-links{display:grid;gap:6px}
.pmd-link{font-size:14px;color:#4338ca;text-decoration:none}
.pmd-link:hover{text-decoration:underline}


/* Footer */
.site-footer{
      border-top:1px solid #e2e8f0;
      background:#f8fafc;
      padding:14px var(--pad) 22px;
      min-height: 3vh;
    }
.footer-inner{
      max-width:var(--wrap);
      margin:0 auto;
      display:flex;
      flex-wrap:wrap;
      gap:8px 18px;
      align-items:center;
      justify-content:center;
      font-size:13px;
      color:var(--muted);
      text-align:center;
    }
.footer-owner{
      font-weight:600;
      text-decoration:none;
      color:var(--text);
    }
.footer-owner:hover{
      color:var(--brand);
    }
.footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:8px 12px;
      align-items:center;
      justify-content:center;
    }
.footer-label{
      font-weight:500;
    }
.footer-links a{
      text-decoration:none;
      color:var(--muted);
    }
.footer-links a:hover{
      color:var(--brand);
    }
@media (max-width:640px){
      .footer-inner{
        flex-direction:column;
      }
    }