/* arama.css — Tema, grid, kartlar ve widget/modallar */

/* ---------- Temalar ---------- */
:root{
  /* Light (default white) */
  --bg:#ffffff; --fg:#0c1533; --mut:#516080; --card:#f7f9ff; --edge:#d9e0f2; --accent:#2266ff;
  --chip:#eef2ff; --input:#fff;
}
[data-theme="midnight"]{ --bg:#0b1020; --fg:#eaf1ff; --mut:#9fb0cf; --card:#121833; --edge:#1f2a4d; --accent:#4da3ff; --chip:#0f1735; --input:#0e1530; }
[data-theme="slate"]{ --bg:#0f172a; --fg:#e2e8f0; --mut:#94a3b8; --card:#111827; --edge:#1f2937; --accent:#38bdf8; --chip:#0b1220; --input:#0b1220; }
[data-theme="mint"]{ --bg:#f7fff9; --fg:#062e24; --mut:#4a7a6f; --card:#ecfbf3; --edge:#cde9dc; --accent:#0ea5a5; --chip:#e4f7ef; --input:#ffffff; }
[data-theme="solar"]{ --bg:#fff8e7; --fg:#3b2f1a; --mut:#806b45; --card:#fff1cc; --edge:#ead9a6; --accent:#ff7a00; --chip:#fff0cf; --input:#ffffff; }

/* ---------- Genel ---------- */
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg);
      font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial }
.wrap{ max-width:1200px; margin:34px auto; padding:0 18px }

/* ---------- Üst araç çubuğu ---------- */
.toolbar{ display:flex; gap:10px; align-items:center; background:var(--card);
          border:1px solid var(--edge); border-radius:16px; padding:14px }
.toolbar h1{ font-size:18px; margin:0 8px 0 2px }
.flex-grow{ flex:1 }
input[type=text]{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--edge);
                  background:var(--input); color:var(--fg); outline:none }
.btn{ appearance:none; border:1px solid var(--edge); background:var(--accent); color:#fff;
      font-weight:700; padding:11px 14px; border-radius:10px; cursor:pointer }
.btn.ghost{ background:var(--chip); color:var(--fg) }
.right{ margin-left:auto; display:flex; gap:8px; align-items:center }
select, input[type=color]{ border:1px solid var(--edge); border-radius:10px; padding:8px; background:var(--input); color:var(--fg) }

/* ---------- Grid ve kartlar ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px }
@media (max-width:1020px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:720px){  .grid{ grid-template-columns:1fr } }

.card{ border:1px solid var(--edge); background:var(--card); border-radius:14px;
       padding:12px; display:flex; flex-direction:column; gap:10px; min-height:220px }
.row{ display:flex; align-items:center; gap:10px }
.logo{ width:48px; height:48px; border-radius:50%; overflow:hidden; border:1px solid var(--edge); flex:0 0 48px }
.title{ font-weight:700 }
.open{ margin-left:auto }
ol{ margin:6px 0 0 18px; padding:0 }
ol li{ margin:4px 0 }
ol a{ color:var(--accent); text-decoration:none }
ol a:hover{ text-decoration:underline }
.muted{ color:var(--mut) }

/* ---------- "Ana sayfam yap" eski modalı (index.php içinde kullanıyorsan) ---------- */
.hp-floating-btn{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  background:linear-gradient(135deg,#2266ff,#7aa9ff);
  color:#fff; border:none; border-radius:14px; padding:12px 14px;
  font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  box-shadow:0 8px 20px rgba(34,102,255,.35);
  cursor:pointer; display:flex; align-items:center; gap:8px; transform:translateZ(0);
  animation:hp-pulse 2.4s ease-in-out infinite;
}
.hp-floating-btn .dot{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.85 }
@keyframes hp-pulse{ 0%,100%{transform:translateZ(0) scale(1)} 50%{transform:translateZ(0) scale(1.04)} }
.hp-modal-back{ position:fixed; inset:0; background:rgba(9,14,26,.55); backdrop-filter: blur(2px);
                display:none; align-items:center; justify-content:center; z-index:10000; }
.hp-modal{ width:min(820px,90vw); max-height:84vh; overflow:auto; background:#fff; color:#0b1220;
           border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid #e1e7ff; padding:16px 18px;
           font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial; }
.hp-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.hp-top h3{ margin:0; font-size:18px }
.hp-x{ margin-left:auto; border:none; background:#eef2ff; color:#1b2a5a; padding:6px 10px; border-radius:8px; cursor:pointer }
.hp-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 10px }
.hp-tab{ padding:7px 10px; border:1px solid #e1e7ff; border-radius:10px; background:#f7f9ff; cursor:pointer; font-weight:600 }
.hp-tab.active{ background:#2266ff; color:#fff; border-color:#2266ff }
.hp-pane{ display:none } .hp-pane.active{ display:block }
.hp-steps ol{ margin:8px 0 0 18px }
.hp-note{ color:#5b6b8e; font-size:13px; margin-top:6px }
.hp-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 }
.hp-copy, .hp-open{ border:1px solid #e1e7ff; background:#f7f9ff; color:#0b1220; padding:7px 10px; border-radius:10px; cursor:pointer; font-weight:600 }
.hp-open{ background:#2266ff; color:#fff; border-color:#2266ff }
.hp-confetti{ position:fixed; inset:0; pointer-events:none; z-index:10001 }
.hp-piece{ position:absolute; width:8px; height:12px; opacity:.9; will-change:transform,opacity }
@keyframes hp-fall{ 0%{transform:translateY(-10vh) rotate(0)} 100%{transform:translateY(92vh) rotate(720deg); opacity:0} }
@media (prefers-color-scheme: dark){
  .hp-modal{ background:#0b1530; color:#eaf1ff; border-color:#1f2a4d }
  .hp-x{ background:#1b2447; color:#dfe7ff }
  .hp-tab{ border-color:#1f2a4d; background:#0f1735; color:#eaf1ff }
  .hp-tab.active{ background:#4da3ff; border-color:#4da3ff; color:#04122b }
  .hp-copy{ border-color:#1f2a4d; background:#0f1735; color:#eaf1ff }
  .hp-open{ background:#4da3ff; border-color:#4da3ff; color:#061327 }
}

/* ---------- A2HS + Bookmark widget ---------- */
.afab { position:fixed; right:18px; bottom:18px; z-index:9999; display:flex; gap:10px; }
.afab .btn {
  background:linear-gradient(135deg,#2266ff,#7aa9ff); color:#fff; border:0; cursor:pointer;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  border-radius:14px; padding:12px 14px; box-shadow:0 8px 20px rgba(34,102,255,.35);
  display:flex; align-items:center; gap:8px; transform:translateZ(0); animation:pulse 2.4s ease-in-out infinite;
}
.afab .ghost { background:#fff; color:#1b2a5a; border:1px solid #e1e7ff; box-shadow:0 8px 20px rgba(0,0,0,.08) }
.afab .btn:active{ transform:translateY(1px) }
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

.afab-back { position:fixed; inset:0; background:rgba(9,14,26,.55); backdrop-filter:blur(2px);
             display:none; align-items:center; justify-content:center; z-index:10000; }
.afab-modal { width:min(820px,92vw); max-height:84vh; overflow:auto; background:#fff; color:#0b1220;
              border-radius:16px; border:1px solid #e1e7ff; box-shadow:0 20px 60px rgba(0,0,0,.35); padding:16px; }
.afab-top { display:flex; align-items:center; gap:10px; margin-bottom:10px }
.afab-top h3{ margin:0; font-size:18px }
.afab-x{ margin-left:auto; border:0; background:#eef2ff; color:#1b2a5a; padding:6px 10px; border-radius:8px; cursor:pointer }
.afab-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 }
.afab-chip{ padding:7px 10px; border:1px solid #e1e7ff; border-radius:10px; background:#f7f9ff; font-weight:600 }
.afab-btn{ border:1px solid #e1e7ff; background:#f7f9ff; color:#0b1220; padding:7px 10px; border-radius:10px; cursor:pointer; font-weight:600 }
.afab-btn.primary{ background:#2266ff; border-color:#2266ff; color:#fff }
.afab-note{ color:#5b6b8e; font-size:13px; margin-top:6px }
.keys{ display:inline-flex; gap:6px; align-items:center }
.key{ padding:4px 7px; border:1px solid #dfe4ff; background:#f2f5ff; border-radius:6px; font-weight:700 }

.confetti{ position:fixed; inset:0; pointer-events:none; z-index:10001 }
.piece{ position:absolute; width:8px; height:12px; opacity:.9; will-change:transform,opacity }
@keyframes fall{ 0%{transform:translateY(-10vh) rotate(0)} 100%{transform:translateY(92vh) rotate(720deg); opacity:0} }

@media (prefers-color-scheme: dark){
  .afab-modal{ background:#0b1530; color:#eaf1ff; border-color:#1f2a4d }
  .afab-x,.afab-btn{ background:#0f1735; color:#eaf1ff; border-color:#1f2a4d }
  .afab-btn.primary{ background:#4da3ff; border-color:#4da3ff; color:#061327 }
  .afab-chip{ background:#0f1735; border-color:#1f2a4d; color:#e1e8ff }
}
.preview-btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--edge);
}
.preview-btn:hover{ opacity:0.95; text-decoration:none }
/* sadece ilk tuşla görünmesi için başlangıçta gizleyeceğimiz bloklar */
.is-hidden{ display:none !important; }

/* Önizleme butonu */

.preview-btn:hover{ opacity:.95; text-decoration:none }

.preview-wrap { text-align: center; margin-top: 8px; }
.preview-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--edge);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.preview-btn:hover { opacity: .95; text-decoration: none; }