* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, Arial, sans-serif;
  background:#f7f7f9;
  color:#1d1d1f;
}

#loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 50% -10%, #2a2a2a, #0f0f10 60%, #000 100%);
}
.loader-title{
  position:relative;
  font-size: clamp(32px,5vw,64px);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  background: linear-gradient(180deg, #c9c9c9 0%, #9a9a9a 40%, #7a7a7a 70%, #d6d6d6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.loader-title::after{
  content:""; position:absolute; inset:-10% -30%;
  background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,.0) 40%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.0) 60%, transparent 100%);
  transform: translateX(-120%) rotate(8deg);
  animation: shine 3.2s ease-in-out .4s forwards;
}
@keyframes shine { to { transform: translateX(120%) rotate(8deg); } }

.seo-h1 {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

nav {
  background:#111;
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid #222;
}
nav .nav-wrap{
  width:min(1200px, 94%); margin:0 auto; padding:12px 0;
  display:flex; gap:18px; align-items:center; justify-content:space-between;
}
.brand { color:#fff; font-weight:800; letter-spacing:.08em; }
.menu { list-style:none; display:flex; gap:18px; flex-wrap:wrap; }
.menu a{
  color:#eaeaea; text-decoration:none; font-weight:600; font-size:15px;
  padding:8px 10px; border-radius:8px; transition:.2s;
}
.menu a:hover{ background:#222; color:#fff; }

.dropdown { position: relative; }
.submenu{
  display: none;                
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 220px;
  background: #171717;
  border:1px solid #242424;
  border-radius:10px;
  padding:8px 0;
  list-style:none;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  z-index: 50;                   
}
.submenu li a{
  display:block;
  padding:10px 14px;
  color:#eaeaea;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}
.submenu li a:hover{ background:#222; color:#fff; }


@media (min-width: 769px){
  .dropdown:hover > .submenu{
    display:block;
  }
}


@media (max-width: 768px){
  .submenu{ display:none !important; }
}

main { width:min(1200px, 94%); margin:18px auto 40px; }


#slider {
  position: relative;
  width: 100%;
  margin: 0 auto 20px;           
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 9;           /* desktop görünüm */
  background:#636363;           
}

.slider-wrapper { position: relative; width: 100%; height: 100%; }
.slider-container { display: flex; width: 100%; height: 100%; transition: transform 0.6s ease; }
.slide { min-width: 100%; position: relative; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.slide-title {
  position: absolute;
  bottom: 15px;
  left: 20px;
  background: rgba(0,0,0,0);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0);
  color: #fff;
  border: none;
  font-size: 65px;
  padding: 8px 14px;
  cursor: pointer;
  z-index: 2;
  border-radius: 80%;
}

.slider-btn.prev { left: 17px; }
.slider-btn.next { right: 17px; }


@media(max-width: 768px){
  #slider { aspect-ratio: 1 / 1; background:#000; }
  .slider-wrapper,
  .slider-container,
  #slider .slide { height: 100%; }
  #slider .slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  #slider .slide { flex-basis: 100% !important; }
}

.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

@media(max-width: 768px) {
  .hamburger { display: block; }

  .menu {
    position: absolute;
    top: 60px; left: 0;
    background: #111;
    width: 100%;
    flex-direction: column;
    gap: 0;
    display: none;
  }
  .menu li { border-bottom: 1px solid #222; }
  .menu li a {
    display: block;
    padding: 12px;
    color: #fff;
  }
  .menu.show { display: flex; }
}

.menu a.aktif {
  border-bottom: 1px solid #5f0202; /* C4N TARAFIDA EMEKLE YYAPILDI */
  color: #fff;
}

.mesaj-listesi { display:grid; gap:16px; margin-top:20px; }
.mesaj-card {
  background:#fff; border:1px solid #ddd; padding:16px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.mesaj-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.mesaj-title { font-size:16px; font-weight:700; color:#111; }
.mesaj-sub   { font-size:13px; color:#555; }

.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px;
  border:1px solid transparent;
}
.badge.okunmadi { background:#fff6f0; color:#9a3b00; border-color:#ffd9bf; }
.badge.okundu   { background:#eefbf0; color:#1f7a3d; border-color:#cdeed6; }

.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:currentColor; }

.mesaj-body { font-size:14px; line-height:1.55; color:#222; margin:8px 0 10px; white-space:pre-wrap; }
.mesaj-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }

.btn-ghost {
  text-decoration:none; font-size:13px; font-weight:700; padding:8px 12px; border-radius:8px;
  background:#111; color:#fff; transition:.2s;
}
.btn-ghost:hover { filter:brightness(1.1); }

.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.filter-bar a {
  text-decoration:none; padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#f6f6f8;
  color:#222; font-weight:600;
}
.filter-bar a.aktif { background:#111; color:#fff; border-color:#000; }

@media (max-width:768px){
  .mesaj-foot { flex-direction:column; align-items:flex-start; }
}

.kategori-filter {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 20px;
}
.kategori-filter a {
  text-decoration:none;
  padding:8px 14px;
  background:#f1f1f3;
  border:1px solid #ccc;
  border-radius:8px;
  color:#222;
  font-weight:600;
  transition:.2s;
}
.kategori-filter a:hover { background:#e7e7ea; }
.kategori-filter a.aktif {
  background:#111;
  color:#fff;
  border-color:#000;
}

.yorum { transition: opacity .25s ease; }
.yorum.hidden { opacity: 0; }

.geri-btn {
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  background:#444;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-size:14px;
}
.geri-btn:hover { background:#000; }

#satis-postlari{ display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post{
  background:#fff; border:1px solid #e7e7ea; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.05);
}
.post-media{ width:100%; aspect-ratio:1/1; background:#111; }
.post-media img{ width:100%; height:100%; object-fit:scale-down; display:block; }
.post-text{ padding:12px 14px; font-size:15px; line-height:1.5; }

.yorum-form{ padding:0 14px 14px; display:grid; gap:8px; }
.yorum-form input, .yorum-form textarea{
  width:100%; padding:10px 12px; border:1px solid #d7d7db; border-radius:10px; font:inherit;
}
.yorum-form button{
  padding:10px 14px; border:0; border-radius:10px; cursor:pointer; font-weight:700;
  background:#111; color:#fff; transition:.2s;
}
.yorum-form button:hover{ filter:brightness(1.1); }

.yorumlar{ padding:0 14px 16px; display:grid; gap:6px; }
.yorum{
  background:#f4f4f6; border:1px solid #e4e4e8; border-radius:10px; padding:8px 10px; font-size:14px;
}

footer{
  background:#c0c0c0; color:#272727; margin-top:40px; border-top:1px solid #cecece;
}
.footer-wrap{ width:min(1200px, 94%); margin:0 auto; padding:18px 0; font-size:14px; }

@media (max-width: 768px){
  .menu{ justify-content:center; }
  .slide{ flex-basis: 82vw; } 
}

@media (max-width: 768px){
  #slider .slide{ flex-basis: 100% !important; }
}

.post {
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
}

.post:hover {
  transform: scale(1.03);
  z-index: 5;
}

.post.clicked {
  transform: scale(1.22);
  z-index: 6;
}

.post .hover-box {
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 12px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s ease;
  height: auto;
  max-height: 80px;
  box-sizing: border-box;
}

.post:hover .hover-box { bottom: 0; opacity: 1; }

.post a {
  text-decoration: none;
  color: inherit;
  display: block;
}

@media (max-width: 768px) {
  .post:hover .hover-box { display: none !important; }
}

.map-brands{
  width:min(1200px, 94%);
  margin: 10px auto 26px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 560px) 1fr;
  gap: 16px;
  align-items: start;
}


.brand-column{
  display: grid;
  gap: 14px;
}
.brand-card{
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.brand-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.1);
}
.brand-head{
  display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.brand-head img{
  width:72px; height:40px; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
.brand-placeholder{
  width:56px; height:56px; border-radius:12px;
  background:#eee; color:#444; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px;
}
.brand-card h3{
  font-size:16px; margin:0; color:#111;
}
.brand-desc{
  font-size:14px; color:#444; line-height:1.45; margin:6px 0 10px;
}
.brand-actions{ display:flex; gap:8px; }


.map-card{
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(255, 13, 13, 0.06);
}
.map-ratio{
  position:relative;
  width:100%;
  aspect-ratio: 16/10; 
  background:#dcdcdc;
}
.map-ratio iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.map-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-top:1px solid #eee;
  font-size:14px; color:#000000;
}


@media (max-width: 1024px){
  .map-brands{
    grid-template-columns: 1fr;  
  }
  .brand-column{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .brand-column{ grid-template-columns: 1fr; } 
  .map-meta{ flex-direction:column; align-items:flex-start; }
}


.reviews{
  position: relative;
  width:min(1200px, 94%);
  margin: 32px auto 0;
  padding: 22px 14px 30px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 50% -20%, #151518, #0b0b0f 60%, #07070a 100%);
  border:1px solid #1d1d24;
}
.reviews-head{
  position: relative;
  z-index: 1;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding: 2px 4px 10px;
}
.reviews-head h2{
  color:#fff; font-size: clamp(18px, 2.6vw, 24px); letter-spacing:.02em;
}
.reviews-head p{ color:#cfcfe0; font-size:14px; }

.stars{ position:absolute; inset:-30% -10% -30% -10%; pointer-events:none; }
.stars-1::before, .stars-2::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.9) 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.7) 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 70% 40%, rgba(255,255,255,.8) 60%, transparent 61%),
    radial-gradient(1.8px 1.8px at 85% 65%, rgba(255,255,255,.85) 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 55% 25%, rgba(255,255,255,.75) 60%, transparent 61%),
    radial-gradient(1.4px 1.4px at 20% 60%, rgba(255,255,255,.8) 60%, transparent 61%);
  background-repeat: repeat;
  background-size: 320px 220px;
  opacity:.25;
  animation: starMove 55s linear infinite;
}
.stars-2::before{
  background-size: 480px 340px;
  opacity:.35;
  animation-duration: 85s;
  filter: blur(.2px);
}
@keyframes starMove{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-420px); }
}

/* Carousel */
.reviews-carousel{
  position: relative; z-index: 1;
}
.rv-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08);
  color:#fff; border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; cursor:pointer; z-index:2;
  transition: background .2s ease, transform .2s ease;
}
.rv-btn:hover{ background: rgba(255,255,255,.16); transform: translateY(-50%) scale(1.05); }
.rv-prev{ left: 4px; } .rv-next{ right: 4px; }

.review-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 8px 48px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.review-track::-webkit-scrollbar{ height:8px; }
.review-track::-webkit-scrollbar-track{ background: transparent; }
.review-track::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #2a2a33, #3a3a46);
  border-radius: 999px;
}

.review-card{
  scroll-snap-align: start;
  background: linear-gradient(180deg, #121218, #0d0d13);
  border: 1px solid #21212a;
  color:#eaeaf2;
  padding: 14px;
  border-radius: 16px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  position: relative;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.review-card::before{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-top:20px solid #2f2f3b; border-left:20px solid transparent; 
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.rv-text{ font-size:14px; line-height:1.55; color:#cfd0de; margin:8px 0 10px; }

.rv-stars{ position:relative; display:inline-block; font-size:16px; line-height:1; }
.rv-stars-bg, .rv-stars-fg{
  font-weight:900; letter-spacing:.12em;
  -webkit-text-stroke: .8px rgba(255,255,255,.35);
}
.rv-stars-bg{ color: transparent; }
.rv-stars-fg{
  color: #ffd35a;
  position:absolute; inset:0 0 0 0;
  width:100%; overflow:hidden; white-space:nowrap;
}

.rv-user{ display:flex; align-items:center; gap:10px; }
.rv-avatar{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#0c0c12;
  background: linear-gradient(140deg, #ffd35a, #ff9c5a);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.rv-user strong{ display:block; color:#fff; line-height:1.1; }
.rv-user small{ display:block; color:#a8a9ba; font-size:12px; }

/* Responsive */
@media (max-width: 768px){
  .rv-btn{ display:none; }          /* mobilde okları gizle; swipe yeterli */
  .review-track{ padding: 8px 8px; }
}

.map-and-brands{
  width:min(1200px, 94%);
  margin: 24px auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.map-and-brands .map-card{
  background:#fff; border:1px solid #e7e7ea; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 24px rgba(255, 0, 0, 0.082);
}
.map-and-brands .map-ratio{ position:relative; width:100%; aspect-ratio:16/9; background:#dcdcdc; }
.map-and-brands .map-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-and-brands .map-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 12px; border-top:1px solid #eee; font-size:14px; color:#222;
}

.brand-row{
  background:#fff; border:1px solid #e7e7ea; border-radius:16px; padding:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  display:flex; gap:10px; overflow-x:auto; align-items:center;
  scroll-snap-type: x proximity;
}
.brand-row::-webkit-scrollbar{ height:8px; }
.brand-row::-webkit-scrollbar-thumb{ background:#cfcfd6; border-radius:999px; }

.brand-chip{
  scroll-snap-align: start;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  text-decoration:none; color:#1b1b1f; font-weight:700; font-size:14px;
  background: linear-gradient(180deg, #fafafa, #f1f1f5);
  border:1px solid #e3e3ea;
  position:relative; transition: transform .15s ease, box-shadow .15s ease;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.brand-chip::before{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-top:14px solid #e9e9f0; border-left:14px solid transparent;
}
.brand-chip:hover{ transform: translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.08); }
.brand-chip img{ height:24px; width:auto; object-fit:contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.08)); }
.brand-initial{
  width:24px; height:24px; border-radius:6px; background:#ececf2; color:#444;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.brand-chip.more{ background:#111; color:#fff; border-color:#000; }
.brand-chip.more::before{ border-top-color:#2a2a2a; }

@media (max-width: 900px){
  .map-and-brands{ grid-template-columns: 1fr; }
  .map-and-brands .map-ratio{ aspect-ratio: 16/10; }
}

.rv-btn{ z-index: 5; }

.brand-row-wrap,
.map-card-wrap{
  width:min(1200px, 94%);
  margin: 16px auto;
}

.stars{ z-index:0; }


/* === SSS / FAQ === */
.faq-wrap{
  width:min(1200px, 94%);
  margin: 18px auto 0;
}
.faq-card{
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.faq-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.faq-head h2{ font-size: clamp(18px, 2.6vw, 22px); color:#111; }
.faq-head p{ color:#4a4a55; font-size:14px; }

.faq-list{ display:grid; gap:10px; }
.faq-item{
  border:1px solid #eee; border-radius:12px; background:#fafafa; padding:10px 12px;
}
.faq-item summary{
  cursor:pointer; list-style:none; font-weight:700; color:#111; outline:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open]{ background:#d0d0d1; }
.faq-a{ margin-top:8px; color:#333; font-size:14px; line-height:1.55; }

/* Kullanıcı menüsü */
.user-dropdown {
  position: relative;
}

.user-dropdown .user-menu {
  display: none;
  position: absolute;
  background: #fff;
  top: 100%;
  right: 0;
  min-width: 160px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 6px;
  overflow: hidden;
  z-index: 1000;
}

.user-dropdown .user-menu li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

.user-dropdown .user-menu li a:hover {
  background: #f3f3f3;
}

/* Masaüstü hover */
@media(min-width:769px) {
  .user-dropdown:hover .user-menu {
    display: block;
  }
}

/* Mobil tıklama */
@media(max-width:768px) {
  .user-dropdown.active .user-menu {
    display: block;
  }
}