:root{
  --ink:#0b0e15;
  --surface:rgba(18,23,33,.72);
  --surface-2:rgba(26,32,44,.92);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#f4f1ea;
  --text-dim:#9aa2b1;
  --accent:#ff5a36;
  --accent-2:#ffae3b;
  --accent-ink:#1a0b06;
  --card-bg:rgba(255,255,255,.035);
  --card-bg-hover:rgba(255,255,255,.06);
  --chip-bg:rgba(255,255,255,.06);
  --act-bg:rgba(255,255,255,.06);
  --act-bg-hover:rgba(255,255,255,.11);
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
}

[data-theme="light"]{
  --ink:#e5e0d6;
  --surface:rgba(244,239,229,.84);
  --surface-2:rgba(247,242,232,.96);
  --line:rgba(68,55,42,.12);
  --line-2:rgba(68,55,42,.20);
  --text:#1d1a16;
  --text-dim:#6e655c;
  --accent:#e85a2a;
  --accent-2:#d9902f;
  --accent-ink:#1a0b06;
  --card-bg:rgba(255,250,240,.92);
  --card-bg-hover:#efe7d9;
  --chip-bg:rgba(80,62,44,.07);
  --act-bg:rgba(80,62,44,.07);
  --act-bg-hover:rgba(80,62,44,.11);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  transition:background .3s ease,color .3s ease;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(820px 420px at 82% -6%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 70%),
    var(--ink);
}

a{
  color:inherit;
}

/* NAV */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
  background:color-mix(in srgb,var(--ink) 80%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:150px;
  height:82px;
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  isolation:isolate;
}

.brand-logo{
  position:relative;
  z-index:2;
  height:82px;
  width:auto;
  max-width:none;
  display:block;
  pointer-events:none;
}

.brand-name{
  display:none;
}

[data-theme="light"] .brand::before{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  inset:-12px -18px;
  border-radius:999px;
  background:radial-gradient(
    circle at center,
    rgba(25,18,12,.24) 0%,
    rgba(25,18,12,.16) 35%,
    rgba(25,18,12,.08) 58%,
    rgba(25,18,12,0) 82%
  );
  filter:blur(10px);
  transform:scale(1.02);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-link{
  text-decoration:none;
  color:var(--text-dim);
  font-weight:600;
  font-size:.9rem;
  padding:8px 12px;
  border-radius:999px;
  transition:all .15s;
}

.nav-link:hover{
  color:var(--text);
  background:var(--card-bg-hover);
}

.theme-btn{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--text);
  border-radius:50%;
  transition:all .15s;
}

.theme-btn:hover{
  border-color:var(--accent);
}

.theme-btn svg{
  width:18px;
  height:18px;
}

/* Mobil hesap ikonu: masaüstünde metin nav-link'leri var, gizli kalır.
   640px altında nav-link'ler gizlendiği için tek hesap erişimi budur. */
.nav-account{
  display:none;
}

/* SAYFA */
.page{
  max-width:920px;
  margin:0 auto;
  padding:34px 18px 8px;
  animation:fadeUp .5s both;
}

.listing{
  max-width:1080px;
}

.kicker{
  display:inline-block;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  color:var(--accent);
  margin-bottom:10px;
}

.detail-title,
.listing-title{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  font-size:clamp(1.9rem,5vw,2.8rem);
  margin:0 0 12px;
}

.listing-sub{
  color:var(--text-dim);
  font-size:1.02rem;
  line-height:1.5;
  max-width:62ch;
  margin:0 0 26px;
}

/* DETAY */
.detail-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:var(--text-dim);
  font-size:.95rem;
  margin-bottom:14px;
}

.detail-meta .price{
  color:var(--accent-2);
  font-weight:700;
  letter-spacing:1px;
}

.detail-meta .dot{
  opacity:.45;
}

.pbadge{
  display:inline-block;
  font-size:.74rem;
  font-weight:600;
  color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent-2) 35%,transparent);
  background:color-mix(in srgb,var(--accent-2) 10%,transparent);
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}

.pchips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.detail-tags{
  margin:0 0 20px;
}

.pchip{
  text-decoration:none;
  font-size:.78rem;
  color:var(--text-dim);
  background:var(--chip-bg);
  border:1px solid var(--line);
  padding:5px 11px;
  border-radius:999px;
  transition:all .15s;
  text-transform:capitalize;
}

a.pchip:hover{
  color:var(--accent);
  border-color:var(--accent);
}

.detail-image{
  margin:4px 0 22px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
}

.detail-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:440px;
  object-fit:cover;
}

.detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:26px;
}

.act{
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  background:var(--act-bg);
  border:1px solid var(--line);
  padding:10px 15px;
  border-radius:12px;
  transition:all .15s;
}

.act:hover{
  background:var(--act-bg-hover);
  border-color:var(--line-2);
}

.act svg{
  width:16px;
  height:16px;
  opacity:.85;
  flex:0 0 auto;
}

.act-primary{
  color:var(--accent-ink);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
}

.act-primary:hover{
  filter:brightness(1.06);
}

.detail-section{
  color:var(--text);
  font-size:1rem;
  line-height:1.65;
  margin:0 0 18px;
  max-width:70ch;
}

.detail-section p{
  margin:0 0 12px;
}

.detail-long{
  color:var(--text-dim);
}

.detail-loc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  margin:6px 0 30px;
}

.detail-loc-label{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
  margin-bottom:3px;
}

.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:-.02em;
  margin:6px 0 16px;
}

.detail-similar{
  margin-top:8px;
}

/* KART GRID */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media(min-width:640px){
  .card-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(min-width:980px){
  .card-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.pcard{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--text);
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  transition:border-color .2s,background .2s,transform .2s;
}

.pcard:hover{
  border-color:var(--accent);
  background:var(--card-bg-hover);
  transform:translateY(-2px);
}

.pcard-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:-.01em;
  margin:0;
  line-height:1.2;
}

.pcard-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:var(--text-dim);
  font-size:.85rem;
  margin-top:6px;
}

.pcard-meta .pcard-cat{
  color:var(--text);
  font-weight:600;
}

.pcard-meta .price{
  color:var(--accent-2);
  font-weight:700;
  letter-spacing:1px;
}

.pcard-meta .dot{
  opacity:.45;
}

.pcard .pchips{
  margin-top:9px;
}

.pcard-desc{
  color:var(--text-dim);
  font-size:.88rem;
  line-height:1.45;
  margin:10px 0 0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pcard-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap; /* dar ekranda sıkışma yerine alt satıra in */
  gap:8px;
  margin-top:auto;
  padding-top:13px;
}

.pcard-more{
  color:var(--accent);
  font-weight:600;
  font-size:.82rem;
  margin-left:auto; /* badge satıra sığmasa da "Detayları gör" sağda kalır */
  white-space:nowrap;
}

/* EMPTY + BACK */
.pub-empty{
  text-align:center;
  padding:54px 18px;
  color:var(--text-dim);
}

.pub-empty .big{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:8px;
}

.pub-empty a{
  color:var(--accent);
}

.back-home{
  margin:28px 0 8px;
}

.back-home a{
  color:var(--text-dim);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
}

.back-home a:hover{
  color:var(--accent);
}

/* FOOTER */
.pub-footer{
  position:relative;
  margin-top:44px;
  padding:36px 18px calc(30px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  text-align:center;
}

.pub-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:38%;
  right:38%;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.footer-brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

/* Logo artık ana sayfaya götüren bir link (görsel değişiklik yok) */
.footer-brand-link{
  position:relative;
  z-index:2;
  display:inline-flex;
}

.footer-logo{
  position:relative;
  z-index:2;
  height:70px;
  width:auto;
  max-width:280px;
  display:block;
}

[data-theme="light"] .footer-brand::before{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  inset:-10px -22px;
  border-radius:999px;
  background:radial-gradient(
    circle at center,
    rgba(25,18,12,.24) 0%,
    rgba(25,18,12,.16) 35%,
    rgba(25,18,12,.08) 58%,
    rgba(25,18,12,0) 82%
  );
  filter:blur(10px);
}

.footer-tag{
  color:var(--text-dim);
  font-size:.86rem;
  margin:8px 0 15px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  margin-bottom:15px;
}

@media(min-width:560px){
  .footer-links{
    flex-direction:row;
    flex-wrap:wrap; /* satıra sığmazsa taşma yerine alt satıra geç */
    justify-content:center;
  }
}

.footer-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--text);
  font-size:.86rem;
  font-weight:600;
  background:var(--act-bg);
  border:1px solid var(--line);
  padding:9px 15px;
  border-radius:999px;
  transition:all .15s;
}

.footer-link:hover{
  background:var(--act-bg-hover);
  border-color:var(--accent);
  color:var(--accent);
}

.footer-link svg{
  width:15px;
  height:15px;
}

.footer-copy{
  color:var(--text-dim);
  font-size:.76rem;
}

@media(max-width:640px){
  .site-nav{
    padding:10px 12px;
  }

  .brand{
    width:122px;
    height:68px;
  }

  .brand-logo{
    height:68px;
  }

  .nav-link{
    display:none;
  }

  /* nav-link'ler gizliyken hesap erişimi: theme-btn ile aynı görsel dilde ikon */
  .nav-account{
    display:inline-flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line-2);
    background:var(--surface);
    color:var(--text);
    border-radius:50%;
    transition:all .15s;
  }

  .nav-account:hover{
    border-color:var(--accent);
  }

  .nav-account svg{
    width:18px;
    height:18px;
  }

  .footer-logo{
    height:58px;
  }
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

/* ---------- GERİ BİLDİRİM FORMU ---------- */
.fb-form{
  max-width:560px;
  margin:8px 0 0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.fb-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.fb-label{
  font-size:.86rem;
  font-weight:600;
  color:var(--text);
}

.fb-opt{
  color:var(--text-dim);
  font-weight:400;
}

.fb-input,
.fb-select,
.fb-textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text);
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 13px;
  transition:border-color .15s,background .15s;
}

.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--card-bg-hover);
}

.fb-textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.5;
}

.fb-select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
}

.fb-error{
  color:var(--accent);
  font-size:.82rem;
}

.fb-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.88rem;
  color:var(--text-dim);
  line-height:1.45;
  cursor:pointer;
}

.fb-check input{
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
  flex:0 0 auto;
}

.fb-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:4px;
}
/* `hidden` attribute'u .fb-actions{display:flex} tarafından ezilmesin (author > UA) */
.fb-actions[hidden]{display:none;}

.fb-actions .act{
  cursor:pointer;
  font-family:var(--font-body);
  border:1px solid var(--line);
}

.fb-success{
  max-width:640px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--text);
  border-radius:14px;
  padding:12px 14px;
  margin:0 0 18px;
  font-size:.9rem;
}

.fb-activity{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  font-size:.9rem;
  color:var(--text-dim);
}

.fb-activity strong{
  color:var(--text);
}

.hp-field{
  position:absolute!important;
  left:-9999px!important;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- DETAY: harita + feedback linkleri ---------- */
.detail-feedback{
  margin:30px 0 6px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.detail-feedback-label{
  display:block;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
  margin-bottom:10px;
}

.detail-feedback-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

/* ---------- LANDING: haritada göster CTA ---------- */
.listing-cta{
  margin:2px 0 26px;
}
/* ---------- FEEDBACK POLISH ---------- */

/* Formu sayfanın ortasına al */
.feedback-page,
.page.detail:has(.fb-form){
  max-width:720px;
}

.fb-form{
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

.page.detail:has(.fb-form) .kicker,
.page.detail:has(.fb-form) .detail-title,
.page.detail:has(.fb-form) .listing-sub,
.page.detail:has(.fb-form) .back-home{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

/* Dark modda select dropdown okunabilir olsun */
.fb-select option{
  background:#11161f;
  color:#f4f1ea;
}

[data-theme="light"] .fb-select option{
  background:#fffaf0;
  color:#1d1a16;
}

/* Checkbox native beyaz kutu sorununu düzelt */
.fb-check input{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:5px;
  border:1px solid var(--line-2);
  background:var(--card-bg);
  display:inline-grid;
  place-content:center;
  cursor:pointer;
}

.fb-check input::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:3px;
  transform:scale(0);
  transition:transform .12s ease;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}

.fb-check input:checked::before{
  transform:scale(1);
}

.fb-check input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
/* İkincil linkler: mobilde 4 buton temiz 2x2 grid (taşma yok),
   560px üstünde ortalı tek satır / temiz wrap. */
.footer-links-secondary{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}

.footer-link-wide{
  min-width:0;
  justify-content:center;
}

@media(min-width:560px){
  .footer-links-secondary{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:auto;
    max-width:none;
  }

  .footer-link-wide{
    min-width:150px; /* 190px sabiti gevşetildi: 4 link tek satıra sığar */
  }
}

.share-btn{
  cursor:pointer;
  font-family:var(--font-body);
}

.share-btn.is-copied{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}

/* ---------- HUKUKİ / AYDINLATMA SAYFASI ---------- */
.legal{
  max-width:760px;
  color:var(--text-dim);
  font-size:.97rem;
  line-height:1.7;
}

.legal h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:-.01em;
  color:var(--text);
  margin:26px 0 10px;
}

.legal h2:first-of-type{
  margin-top:6px;
}

.legal h3{
  font-weight:700;
  font-size:1rem;
  color:var(--text);
  margin:18px 0 6px;
}

.legal p{
  margin:0 0 12px;
}

.legal ul{
  margin:0 0 12px;
  padding-left:20px;
}

.legal li{
  margin:0 0 6px;
}

.legal a{
  color:var(--accent);
  text-decoration:none;
}

.legal a:hover{
  text-decoration:underline;
}

.legal-updated{
  font-size:.82rem;
  color:var(--text-dim);
  margin-bottom:18px;
}

.legal strong{
  color:var(--text);
}

/* HAKKIMIZDA: legal tabanı + daha ferah bölüm ritmi */
.about .about-lead{
  font-size:1.06rem;
  color:var(--text);
  line-height:1.75;
}
.about h2{
  margin-top:34px; /* bölümler arası net ayrım */
}
.about p{
  margin-bottom:14px;
}

/* Geri bildirim onay metnindeki link */
.fb-check a{
  color:var(--accent);
  text-decoration:none;
}

.fb-check a:hover{
  text-decoration:underline;
}

.category-row::before,
.category-row::after,
.tag-row::before,
.tag-row::after{
  pointer-events:none !important;
}

.category-row *,
.tag-row *{
  pointer-events:auto;
}

/* ---- galeri kapsayıcı ---- */
.detail-gallery{ width:100%; margin:4px 0 22px; }

/* ---- ana görsel "stage" ---- */
.detail-cover{
  position:relative;
  aspect-ratio:16 / 9;
  max-height:440px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card-bg);
}
.detail-main{
  display:block; width:100%; height:100%;
  object-fit:cover; cursor:zoom-in;
}

/* sağ/sol oklar (ana görsel üstünde) */
.detail-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; z-index:3;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(10,12,18,.45); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .18s ease, background .15s ease;
}
.detail-cover:hover .detail-nav{ opacity:1; }
.detail-nav:hover{ background:rgba(10,12,18,.72); }
.detail-nav svg{ width:20px; height:20px; }
.detail-nav.prev{ left:10px; }
.detail-nav.next{ right:10px; }
@media (hover:none){ .detail-nav{ opacity:1; } } /* dokunmatikte hep görünür */

/* büyüt ipucu */
.detail-zoom{
  position:absolute; top:10px; right:12px; z-index:2; pointer-events:none;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; background:rgba(10,12,18,.42); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.detail-zoom svg{ width:16px; height:16px; }

/* ---- thumbnail strip (yatay, scroll-snap) ---- */
.detail-thumbs{
  display:flex; gap:8px; margin-top:10px; padding-bottom:4px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.detail-thumbs::-webkit-scrollbar{ display:none; }
.detail-thumb{
  flex:0 0 auto; width:88px; height:60px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:10px; overflow:hidden;
  background:var(--card-bg); scroll-snap-align:start;
  transition:border-color .15s ease, transform .12s ease;
}
.detail-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-thumb:hover{ transform:translateY(-1px); border-color:var(--line-2); }
.detail-thumb.is-active{ display:none; } /* o an stage'deki foto strip'te tekrar ETMEZ */

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(6,8,12,.92);
  opacity:0; transition:opacity .18s ease;
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lb-img{
  max-width:92vw; max-height:86vh; width:auto; height:auto;
  object-fit:contain; border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.lb-close{
  position:absolute; top:16px; right:18px; width:42px; height:42px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lb-close:hover{ background:rgba(255,255,255,.22); }
.lb-close svg{ width:22px; height:22px; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lb-nav:hover{ background:rgba(255,255,255,.22); }
.lb-nav svg{ width:26px; height:26px; }
.lb-nav.prev{ left:14px; }
.lb-nav.next{ right:14px; }
.lb-count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.85); font-size:.85rem; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.1); padding:5px 12px; border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ---- mobil ---- */
@media (max-width:640px){
  .detail-cover{ aspect-ratio:16 / 10; max-height:280px; }
  .detail-thumb{ width:76px; height:52px; }
  .lightbox{ padding:12px; }
  .lb-nav{ width:40px; height:40px; }
  .lb-nav.prev{ left:8px; } .lb-nav.next{ right:8px; }
}

/* =========================================================
   PREMIUM PLACEHOLDER (foto yok)  — .detail-cover.ph + pcard
   ========================================================= */
.ph{
  background-color:var(--ph,#ff5a36);
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.5));
  background-size:16px 16px, 100% 100%;
}
.ph .ph-inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end; gap:9px; padding:22px 24px;
}
.ph .ph-cat{
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.ph .ph-name{
  font-family:var(--font-display); font-weight:800; font-size:1.7rem; line-height:1.05;
  letter-spacing:-.01em; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.4); max-width:90%;
}
.ph .ph-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.ph .ph-chip{
  font-size:.72rem; font-weight:600; color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  padding:3px 9px; border-radius:999px; text-transform:capitalize;
}
.ph .ph-watermark{
  position:absolute; top:16px; right:18px;
  font-family:var(--font-display); font-weight:800; font-size:.95rem; letter-spacing:.02em;
  color:rgba(255,255,255,.6);
}
@media (max-width:640px){
  .ph .ph-name{ font-size:1.3rem; }
  .ph .ph-inner{ padding:16px 18px; gap:7px; }
}

/* server kart (pcard) kapak + placeholder (Adim 5b kullanilirsa) */
.pcard-cover{
  position:relative; display:block; aspect-ratio:16/10; border-radius:12px;
  overflow:hidden; margin-bottom:10px; background:var(--card-bg);
}
.pcard-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcard-cover.ph .ph-inner{ padding:12px 13px; gap:6px; }
.pcard-cover.ph .ph-name{ font-size:1.05rem; }
.pcard-cover.ph .ph-cat{ font-size:.66rem; }
.pcard-cover.ph .ph-watermark{ top:10px; right:12px; font-size:.78rem; }
.pcard-cover.ph .ph-chip{ font-size:.64rem; padding:2px 7px; }

/* =========================================================
   FIX: Detail gallery mobile lightbox + Spotla Now logo
   ========================================================= */

/* Lightbox'ı özellikle ID üzerinden sabitle — başka .lightbox CSS'leri ezmesin */
#detail-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;

    display: grid !important;
    place-items: center !important;

    padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;

    background: rgba(6, 8, 12, .94) !important;
    z-index: 99999 !important;
}

#detail-lightbox[hidden] {
    display: none !important;
}

#detail-lightbox .lb-img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 120px) !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: auto !important;
    border-radius: 12px !important;
}

#detail-lightbox .lb-close {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 16px !important;
    z-index: 3 !important;
}

#detail-lightbox .lb-count {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 640px) {
    #detail-lightbox {
        padding: max(58px, env(safe-area-inset-top)) 12px max(70px, env(safe-area-inset-bottom)) !important;
    }

    #detail-lightbox .lb-img {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 150px) !important;
    }

    #detail-lightbox .lb-nav {
        width: 38px !important;
        height: 38px !important;
    }

    #detail-lightbox .lb-nav.prev {
        left: 8px !important;
    }

    #detail-lightbox .lb-nav.next {
        right: 8px !important;
    }
}

/* Detail/public sayfalarda Spotla Now logo düzeltmesi */
.site-header .brand,
.header .brand,
.public-header .brand,
.brand {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}

.site-header .brand img,
.header .brand img,
.public-header .brand img,
.brand img,
.brand-logo {
    display: block !important;

    width: auto !important;
    height: 48px !important;
    max-width: 190px !important;

    object-fit: contain !important;
    object-position: left center !important;

    overflow: visible !important;
}

@media (max-width: 640px) {
    .site-header .brand img,
    .header .brand img,
    .public-header .brand img,
    .brand img,
    .brand-logo {
        height: 42px !important;
        max-width: 165px !important;
    }
}
/* =========================================================
   FIX: Detail lightbox desktop centering
   ========================================================= */

#detail-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 72px 88px 54px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background: rgba(6, 8, 12, .94) !important;
    z-index: 99999 !important;
}

#detail-lightbox[hidden] {
    display: none !important;
}

#detail-lightbox .lb-img {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;
    width: auto !important;
    height: auto !important;

    max-width: min(1180px, calc(100vw - 190px)) !important;
    max-height: calc(100vh - 150px) !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    border-radius: 14px !important;
}

#detail-lightbox .lb-close {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 100001 !important;
}

#detail-lightbox .lb-count {
    position: fixed !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 100001 !important;
}

#detail-lightbox .lb-nav {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100001 !important;
}

#detail-lightbox .lb-nav.prev {
    left: 28px !important;
}

#detail-lightbox .lb-nav.next {
    right: 28px !important;
}

/* Mobil ayarı koru */
@media (max-width: 640px) {
    #detail-lightbox {
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: max(58px, env(safe-area-inset-top)) 12px max(70px, env(safe-area-inset-bottom)) !important;
    }

    #detail-lightbox .lb-img {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 150px) !important;
        border-radius: 12px !important;
    }

    #detail-lightbox .lb-nav.prev {
        left: 8px !important;
    }

    #detail-lightbox .lb-nav.next {
        right: 8px !important;
    }
}

/* =========================================================
   FINAL FIX: Lightbox body-level desktop/mobile centering
   ========================================================= */

body > #detail-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 72px 90px 54px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    background: rgba(6, 8, 12, .94) !important;
    z-index: 999999 !important;
}

body > #detail-lightbox[hidden] {
    display: none !important;
}

body > #detail-lightbox .lb-img {
    display: block !important;
    position: static !important;
    transform: none !important;

    width: auto !important;
    height: auto !important;

    max-width: min(1120px, calc(100vw - 220px)) !important;
    max-height: calc(100vh - 150px) !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: auto !important;
    border-radius: 14px !important;
}

body > #detail-lightbox .lb-close {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 1000000 !important;
}

body > #detail-lightbox .lb-nav {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000000 !important;
}

body > #detail-lightbox .lb-nav.prev {
    left: 28px !important;
}

body > #detail-lightbox .lb-nav.next {
    right: 28px !important;
}

body > #detail-lightbox .lb-count {
    position: fixed !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 1000000 !important;
}

@media (max-width: 640px) {
    body > #detail-lightbox {
        height: 100dvh !important;
        padding: max(58px, env(safe-area-inset-top)) 12px max(70px, env(safe-area-inset-bottom)) !important;
    }

    body > #detail-lightbox .lb-img {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 150px) !important;
        border-radius: 12px !important;
    }

    body > #detail-lightbox .lb-nav.prev {
        left: 8px !important;
    }

    body > #detail-lightbox .lb-nav.next {
        right: 8px !important;
    }
}

/* =========================================================
   Detail lightbox modern line indicators
   ========================================================= */

body > #detail-lightbox .lb-count {
    display: none !important;
}

body > #detail-lightbox .lb-dots {
    position: fixed !important;
    left: 50% !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    z-index: 1000001 !important;
    padding: 8px 10px !important;

    border-radius: 999px !important;
    background: rgba(10, 12, 18, .34) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

body > #detail-lightbox .lb-dots[hidden] {
    display: none !important;
}

body > #detail-lightbox .lb-dot {
    display: block !important;
    width: 18px !important;
    height: 4px !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, .28) !important;
    cursor: pointer !important;

    transition:
        width .2s ease,
        background .2s ease,
        opacity .2s ease,
        transform .2s ease !important;
}

body > #detail-lightbox .lb-dot.is-active {
    width: 32px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, .22) !important;
}

body > #detail-lightbox .lb-dot:hover {
    background: rgba(255, 255, 255, .65) !important;
}

@media (prefers-color-scheme: light) {
    body > #detail-lightbox .lb-dots {
        background: rgba(255, 255, 255, .42) !important;
        border-color: rgba(0, 0, 0, .08) !important;
    }

    body > #detail-lightbox .lb-dot {
        background: rgba(255, 255, 255, .42) !important;
    }

    body > #detail-lightbox .lb-dot.is-active {
        background: rgba(255, 255, 255, .98) !important;
    }
}

@media (max-width: 640px) {
    body > #detail-lightbox .lb-dots {
        bottom: max(82px, env(safe-area-inset-bottom)) !important;
        gap: 6px !important;
        padding: 7px 9px !important;
    }

    body > #detail-lightbox .lb-dot {
        width: 16px !important;
        height: 4px !important;
    }

    body > #detail-lightbox .lb-dot.is-active {
        width: 28px !important;
    }
}

.ph .ph-inner,
.ph .ph-cat,
.ph .ph-name,
.ph .ph-tags,
.ph .ph-chip {
    display: none !important;
}

/* ---- detay placeholder: kart ile ayni seeded aurora ---- */
.detail-cover.ph{
  background-color: var(--ph-base, #0c0f17);
  background-image:
    radial-gradient(var(--hlw,0%) var(--hlh,0%) at var(--hlx,50%) var(--hly,20%),
      var(--hlc, transparent), transparent var(--hlf,55%)),
    radial-gradient(var(--b1w,70%) var(--b1h,100%) at var(--b1x,16%) var(--b1y,22%),
      var(--b1c, transparent), transparent var(--b1f,62%)),
    radial-gradient(var(--b2w,70%) var(--b2h,100%) at var(--b2x,86%) var(--b2y,26%),
      var(--b2c, transparent), transparent var(--b2f,64%)),
    radial-gradient(var(--b3w,85%) var(--b3h,115%) at var(--b3x,72%) var(--b3y,96%),
      var(--b3c, transparent), transparent var(--b3f,62%)),
    radial-gradient(var(--b4w,0%) var(--b4h,0%) at var(--b4x,50%) var(--b4y,50%),
      var(--b4c, transparent), transparent var(--b4f,60%)),
    linear-gradient(var(--ph-angle,140deg), var(--ph-base2,#0c1320), var(--ph-base,#0c0f17) 75%);
  background-size: auto;
}

.detail-cover.ph::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(var(--stka,140deg), transparent 42%, var(--stk, transparent) 50%, transparent 58%),
    radial-gradient(120% 120% at 50% 38%, transparent 55%, rgba(0,0,0, var(--ph-vig,.42)) 100%);
}

.detail-cover.ph::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:150px 150px;
  opacity: var(--ph-grain,.06);
  mix-blend-mode:overlay;
}

.detail-cover.ph .ph-watermark{
  position:absolute;
  z-index:2;
  left:var(--wm-l,12px);
  right:var(--wm-r,auto);
  top:var(--wm-t,auto);
  bottom:var(--wm-b,10px);
  color:var(--wm-c, rgba(255,255,255,.30));
}


/* =====================================================================
   AŞAMA 3 — PROFİL / HESAP (yalnızca yeni sınıflar)
   ===================================================================== */
.profile-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 22px;
}
.profile-tabs .act.is-active{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}

.profile-card{
  max-width:640px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:4px 18px;
}
.profile-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.profile-row:last-child{border-bottom:0;}
.profile-row .k{color:var(--text-dim);flex:0 0 auto;}
.profile-row .v{font-weight:600;text-align:right;word-break:break-word;}
.profile-row .v a{color:var(--accent);text-decoration:none;font-size:.85rem;margin-left:6px;}
.profile-row .v a:hover{text-decoration:underline;}

.profile-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.76rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--line);
}
.profile-badge.ok{color:#22a06b;border-color:color-mix(in srgb,#22a06b 45%,transparent);}
.profile-badge.warn{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 50%,transparent);}

.profile-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  max-width:640px;
}
.profile-stat{
  flex:1;
  min-width:150px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  text-decoration:none;
  display:block;
  transition:border-color .15s, background .15s;
}
a.profile-stat:hover{background:var(--card-bg-hover);border-color:var(--line-2);}
.profile-stat b{
  display:block;
  font-size:1.45rem;
  font-family:var(--font-display);
  letter-spacing:-.02em;
}
.profile-stat span{color:var(--text-dim);font-size:.82rem;}

.profile-form{
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  margin-bottom:8px;
}

.section-desc{
  max-width:640px;
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.5;
  margin:-6px 0 16px;
}

/* Bir formun ardından gelen bölüm başlığı (ör. Bülten) biraz daha ayrık dursun */
.profile-form + .section-title{
  margin-top:28px;
}

/* Harita pin stili seçici (Ayarlar) */
.pin-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pin-style-card{position:relative;cursor:pointer;display:block;}
.pin-style-card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.pin-style-card-inner{
  display:block;
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:12px;
  background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.pin-style-card:hover .pin-style-card-inner{border-color:var(--accent);}
.pin-style-card input:checked + .pin-style-card-inner{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent) inset;
}
.pin-style-card input:focus-visible + .pin-style-card-inner{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);
}
.pin-style-preview{
  display:flex;align-items:center;justify-content:center;gap:14px;
  height:74px;border-radius:10px;background:#0b0e15;
}
.pin-style-preview .psp{
  width:20px;height:20px;border-radius:50% 50% 50% 0;
  box-shadow:0 3px 9px rgba(0,0,0,.55);
}
.pin-style-preview .psp-brand{background:linear-gradient(135deg,#ff5a36,#ffae3b);}
/* Şekil varyantları (Haritam paneliyle aynı dil): minimal = yuvarlak + beyaz ring; glow = hale. */
.pin-style-preview .psp--minimal{width:15px;height:15px;border-radius:50%;box-shadow:0 1px 5px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.9);}
.pin-style-preview .psp--glow{box-shadow:0 3px 9px rgba(0,0,0,.55),0 0 0 4px rgba(255,90,54,.16),0 0 12px 3px rgba(255,90,54,.5);}
.pin-style-name{display:block;font-weight:700;font-size:.95rem;color:var(--text);margin-top:10px;}
.pin-style-desc{display:block;font-size:.8rem;color:var(--text-dim);margin-top:2px;}
@media(max-width:520px){.pin-style-grid{grid-template-columns:1fr;}}

/* Kategori pin renkleri (ayarlar formu): kategori → sınırlı palet (radio-swatch). */
.cat-color-list{display:flex;flex-direction:column;gap:2px;margin:10px 0 4px;}
.cat-color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 2px;border-bottom:1px solid var(--line);}
.cat-color-row:last-child{border-bottom:0;}
.cat-color-name{font-weight:600;font-size:.92rem;color:var(--text);}
.cat-color-swatches{display:flex;flex-wrap:wrap;gap:8px;}
.cat-swatch{position:relative;cursor:pointer;line-height:0;}
.cat-swatch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.cat-swatch-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--sw,#ff5a36);
  border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .12s,border-color .12s;}
.cat-swatch:hover .cat-swatch-dot{transform:scale(1.1);}
.cat-swatch input:checked + .cat-swatch-dot{border-color:var(--text);box-shadow:0 0 0 2px var(--surface),0 1px 4px rgba(0,0,0,.5);}
.cat-swatch input:focus-visible + .cat-swatch-dot{border-color:var(--accent);}

/* Keşif tercihleri (ayarlar formu): favori / gizli kategori checkbox grupları. */
.pref-cat-group{margin-top:12px;}
.pref-cat-title{font-weight:700;font-size:.92rem;color:var(--text);margin-bottom:6px;}
.pref-cat-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 14px;}
.pref-cat-check{margin:0;}

/* Profil rozeti (ayarlar): pin-style kartlarıyla aynı dil; seçili accent. */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;}
.badge-card{position:relative;cursor:pointer;display:block;}
.badge-card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.badge-card-inner{display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid var(--line-2);
  border-radius:14px;padding:13px 8px;background:var(--surface);transition:border-color .15s,box-shadow .15s;}
.badge-card:hover .badge-card-inner{border-color:var(--accent);}
.badge-card input:checked + .badge-card-inner{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;}
.badge-card input:focus-visible + .badge-card-inner{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent);}
.badge-card-ico svg{width:26px;height:26px;color:var(--text);}
.badge-card input:checked + .badge-card-inner .badge-card-ico svg{color:var(--accent);}
.badge-card-name{font-size:.82rem;font-weight:600;color:var(--text);}
@media(max-width:520px){.badge-grid{grid-template-columns:repeat(3,1fr);}}

.profile-empty{
  max-width:640px;
  background:var(--card-bg);
  border:1px dashed var(--line-2);
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  color:var(--text-dim);
}
.profile-empty .big{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--text);
  margin-bottom:6px;
}
.profile-empty .act{margin-top:14px;}

.danger-zone{
  margin-top:30px;
  max-width:640px;
  border:1px solid color-mix(in srgb,#e5484d 45%,transparent);
  background:color-mix(in srgb,#e5484d 6%,transparent);
  border-radius:16px;
  padding:18px;
}
.danger-zone h2{
  font-family:var(--font-display);
  font-size:1.05rem;
  margin:0 0 8px;
  color:#ff8a8e;
}
[data-theme="light"] .danger-zone h2{color:#c0353a;}
.danger-zone p{color:var(--text-dim);font-size:.9rem;margin:0 0 14px;}
.danger-zone .fb-field{margin-bottom:12px;}
.danger-zone .fb-check{margin-bottom:12px;}

.act-danger{
  color:#fff;
  background:#c0353a;
  border-color:transparent;
}
.act-danger:hover{background:#a82c30;border-color:transparent;}

/* Profil: çıkış butonu (nötr; hesap silmeyle karışmasın diye kırmızı değil) */
.profile-logout{
  margin-top:18px;
  max-width:640px; /* profile-card/stats ile aynı hiza */
}
.profile-logout .logout-act{
  cursor:pointer;
  font-family:var(--font-body);
  color:var(--text-dim);
}
.profile-logout .logout-act:hover{
  color:var(--text);
  border-color:var(--line-2);
}
@media(max-width:640px){
  .profile-logout .logout-act{
    width:100%;
    justify-content:center;
    padding:11px 15px; /* mobilde rahat dokunma alanı */
  }
}

.caps-warning{
  margin-top:6px;
  font-size:.82rem;
  font-weight:700;
  color:#f97316;
}

/* pcard sarmalayıcı: kalp <a> İÇİNDE DEĞİL, kardeş eleman (geçerli HTML)
   - column flex  -> .pcard wrap'i tamamen doldurur (grid'de eşit kart yükseklikleri)
   - buton DOM'da SONDA: absolute uygulanmazsa bile kartın YANINA değil altına düşer
   - min-width:0  -> grid hücresi daralabilir, kartlar sıkışmaz/taşmaz */
.pcard-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pcard-wrap > .pcard{
  flex:1 1 auto;
  width:100%;
  min-width:0;
}
.pcard-wrap > .fav-btn{
  position:absolute;
  top:10px;
  right:10px;
}
.pcard-wrap .pcard-title{
  padding-right:38px; /* kalp uzun başlıkla çakışmasın */
  overflow-wrap:anywhere;
}

/* Kalp butonu — görünüm (konum yukarıda, kapsam bazlı) */
.fav-btn{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:color-mix(in srgb,var(--ink) 55%,transparent);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition:all .15s;
  z-index:2;
}
.fav-btn svg{width:16px;height:16px;display:block;}
.fav-btn:hover{border-color:var(--line-2);transform:scale(1.06);}
.fav-btn.is-fav{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,var(--ink));
}
.fav-btn.is-fav svg{fill:var(--accent);stroke:var(--accent);}

/* Detay aksiyon satırındaki "Kaydet" */
.fav-act{cursor:pointer;font-family:var(--font-body);}
.fav-act.is-fav{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.fav-act.is-fav svg{fill:var(--accent);}

/* 👍 / 👎 */
.detail-rate{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:-8px 0 26px;
}
.detail-rate-label{font-size:.9rem;color:var(--text-dim);}
.detail-rate-btns{display:inline-flex;gap:8px;}
.rate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:38px;
  border-radius:12px;
  background:var(--act-bg);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  transition:all .15s;
  padding:0;
}
.rate-btn svg{width:18px;height:18px;}
.rate-btn:hover{background:var(--act-bg-hover);border-color:var(--line-2);}
.rate-btn.is-active{
  color:var(--accent);
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.rate-btn.is-active svg{fill:color-mix(in srgb,var(--accent) 28%,transparent);}

/* Spotla Hesabı modalı */
.sp-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.sp-modal[hidden]{display:none;}
.sp-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,7,12,.6);
  backdrop-filter:blur(6px);
}
.sp-modal-card{
  position:relative;
  width:min(420px,100%);
  background:var(--surface-2);
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:26px 22px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.sp-modal-x{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.sp-modal-x:hover{color:var(--text);border-color:var(--line-2);}
.sp-modal-icon{
  width:46px;
  height:46px;
  margin:0 auto 12px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
}
.sp-modal-icon svg{width:22px;height:22px;fill:var(--accent);stroke:var(--accent);}
.sp-modal-card h2{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:-.01em;
  margin:0 0 8px;
  color:var(--text);
}
.sp-modal-card p{
  font-size:.92rem;
  color:var(--text-dim);
  margin:0 0 18px;
  line-height:1.55;
}
.sp-modal-actions{display:flex;flex-direction:column;gap:8px;}
.sp-modal-actions .act{justify-content:center;cursor:pointer;font-family:var(--font-body);}

/* =====================================================================
   SOSYAL GİRİŞ (Google) — yalnızca ek
   ===================================================================== */
.sso-divider{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:18px auto 12px;
  color:var(--text-dim);
  font-size:.8rem;
}
.sso-divider::before,
.sso-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.sso-btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.sso-btn svg{flex:0 0 auto;}
.sso-btn.is-loading{opacity:.6;pointer-events:none;cursor:default;}