/* ============================================================
   SocialTag — Ana sayfa stilleri
   Metinleri değiştirmek için: assets/home-content.js
   Renk, köşe ve tipografi ayarları aşağıdaki :root bloğundadır.
   ============================================================ */

:root {
  --siyah: #0B0B0C;
  --grafit: #18191C;
  --grafit-acik: #202226;
  --kirik-beyaz: #F5F3EE;
  --beyaz: #FFFFFF;
  --acik-gri: #D9D9D6;
  --gri: #8B8D91;
  /* Vurgu: elektrik mavi -> yumuşak menekşe. Düz renk yerine gradyan + ışıma
     kullanılır; rgb değeri saydam katmanlar için ayrıca tutulur. */
  --vurgu: #7DA2FF;
  --vurgu-2: #B49BFF;
  --vurgu-rgb: 125, 162, 255;
  --vurgu-gradyan: linear-gradient(135deg, #7DA2FF 0%, #A78BFA 100%);
  --vurgu-isima: 0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 28px rgba(125,162,255,.26);

  --cizgi: rgba(245, 243, 238, 0.09);
  --cizgi-guclu: rgba(245, 243, 238, 0.16);

  --r-s: 16px;
  --r-m: 20px;
  --r-l: 24px;

  --golge: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.18);
  --golge-yumusak: 0 1px 1px rgba(0,0,0,.2);

  --kenar: clamp(20px, 5vw, 72px);
  --bolum: clamp(72px, 10vw, 132px);

  --gecis: 480ms cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--siyah);
  color: var(--kirik-beyaz);
  font-family: Manrope, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: 6px;
}

.kapsa { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--kenar); }
.bolum { padding: var(--bolum) 0; }

/* ---------- Tipografi ---------- */
.ust-baslik {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gri);
  margin: 0 0 18px;
}
.ust-baslik::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vurgu-gradyan);
  box-shadow: 0 0 10px rgba(var(--vurgu-rgb), .6);
  margin-right: 10px;
  vertical-align: 1px;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
h1 { font-size: clamp(34px, 5.2vw, 60px); }
h2 { font-size: clamp(27px, 3.6vw, 43px); }
h3 { font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.015em; line-height: 1.3; }

.metin { color: var(--gri); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.72; max-width: 60ch; margin: 18px 0 0; }
.metin-genis { max-width: 68ch; }

/* ---------- Butonlar ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 26px;
  border-radius: var(--r-s);
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
  will-change: transform;
}
.dugme:hover { transform: translateY(-2px); }
.dugme:active { transform: translateY(0); }
.dugme-birincil { background: var(--kirik-beyaz); color: var(--siyah); box-shadow: var(--golge-yumusak); }
.dugme-birincil:hover { background: var(--beyaz); }
.dugme-ikincil { border: 1px solid var(--cizgi-guclu); color: var(--kirik-beyaz); }
.dugme-ikincil:hover { border-color: rgba(245,243,238,.3); background: rgba(245,243,238,.04); }
.dugme-vurgu { background: var(--vurgu-gradyan); color: var(--siyah); box-shadow: var(--vurgu-isima); }
.dugme-vurgu:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 12px 36px rgba(var(--vurgu-rgb), .38); }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Navigasyon ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color var(--gecis), border-color var(--gecis), backdrop-filter var(--gecis);
  border-bottom: 1px solid transparent;
}
.nav.kaydi {
  background: rgba(11, 11, 12, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--cizgi);
}
.nav-ic { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.nav-logo img { height: 34px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-menu a { font-size: 14.5px; color: var(--acik-gri); transition: color 160ms ease; }
.nav-menu a:hover { color: var(--beyaz); }
.nav-sag { display: flex; align-items: center; gap: 12px; }
.nav-sag .dugme { min-height: 42px; padding: 0 20px; font-size: 14px; }

.nav-menu-demo { display: none; }

.nav-ac {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--cizgi);
}
.nav-ac span { display: block; width: 18px; height: 1.5px; background: var(--kirik-beyaz); position: relative; }
.nav-ac span::before, .nav-ac span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--kirik-beyaz);
  transition: transform 220ms ease, opacity 220ms ease;
}
.nav-ac span::before { top: -6px; }
.nav-ac span::after { top: 6px; }
.nav.acik .nav-ac span { background: transparent; }
.nav.acik .nav-ac span::before { transform: translateY(6px) rotate(45deg); }
.nav.acik .nav-ac span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 132px; padding-bottom: var(--bolum); overflow: hidden; }
.hero-izgara { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 17ch; text-wrap: balance; }
.hero .metin { max-width: 48ch; font-size: clamp(16px, 1.3vw, 18px); }

.guven { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 26px; font-size: 13.5px; color: var(--gri); }
.guven span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.guven span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--cizgi-guclu); flex-shrink: 0; }

/* Ürün sahnesi — arka planı kaldırılmış ürün, koyu zemin üzerinde yüzer */
.urun-sahne { position: relative; perspective: 1200px; padding: 28px 0; }
.urun-sahne::before {
  /* ürünün arkasındaki yumuşak ışıma */
  content: ""; position: absolute; inset: 6% 8%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(var(--vurgu-rgb), .20), rgba(var(--vurgu-rgb), .05) 55%, transparent 72%);
  filter: blur(24px);
}
.urun-kutu {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
  animation: yuz 7s ease-in-out infinite;
}
.urun-kutu img {
  width: 100%; height: auto;
  filter: drop-shadow(0 34px 60px rgba(0,0,0,.62)) drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
@keyframes yuz {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.urun-parlama { display: none; }
.urun-nfc {
  position: absolute; left: 4%; bottom: 8%; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(11,11,12,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--cizgi-guclu);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
}
.nfc-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--vurgu-gradyan); box-shadow: 0 0 10px rgba(var(--vurgu-rgb), .7); position: relative; }
.nfc-nokta::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--vurgu); opacity: .55;
  animation: nabiz 2.6s ease-out infinite;
}
@keyframes nabiz {
  0%   { transform: scale(.6); opacity: .6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.aksiyon-listesi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.aksiyon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: rgba(245,243,238,.02);
  font-size: 13.5px; color: var(--acik-gri);
}
.aksiyon svg { width: 15px; height: 15px; stroke: var(--gri); }
.aksiyon-ozel { border-color: rgba(var(--vurgu-rgb), .34); color: var(--kirik-beyaz); }
.aksiyon-ozel svg { stroke: var(--vurgu); }

/* ---------- Problem / Çözüm ---------- */
.karsilastirma { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 34px); align-items: stretch; margin-top: 48px; }
.kars-kart { border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: clamp(24px, 3vw, 34px); background: rgba(245,243,238,.015); }
.kars-kart.iyi { border-color: rgba(var(--vurgu-rgb), .30); background: linear-gradient(180deg, rgba(var(--vurgu-rgb), .085) 0%, rgba(var(--vurgu-rgb), 0) 62%); box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 20px 50px rgba(var(--vurgu-rgb), .08); }
.kars-baslik { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gri); margin-bottom: 22px; }
.kars-kart.iyi .kars-baslik { color: var(--vurgu); }
.kars-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kars-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--acik-gri); }
.kars-liste svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; stroke: var(--gri); }
.kars-kart.iyi .kars-liste svg { stroke: var(--vurgu); }
.kars-ok { display: flex; align-items: center; justify-content: center; color: var(--gri); }
.kars-ok svg { width: 26px; height: 26px; stroke: var(--cizgi-guclu); }

/* ---------- Adımlar ---------- */
.adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); margin-top: 52px; }
.adim { border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: clamp(24px, 2.8vw, 34px); background: rgba(245,243,238,.015); }
.adim-no { font-size: 13px; font-weight: 700; letter-spacing: .1em; background: var(--vurgu-gradyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.adim h3 { margin-top: 18px; }
.adim p { color: var(--gri); font-size: 15.5px; line-height: 1.7; margin: 10px 0 0; }

/* ---------- Canlı demo ---------- */
.demo { background: var(--grafit); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.demo-izgara { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 68px); align-items: center; }

.telefon {
  width: 300px; max-width: 100%; margin: 0 auto;
  border-radius: 42px; padding: 10px;
  background: linear-gradient(160deg, #2A2C31 0%, #131417 60%);
  border: 1px solid var(--cizgi-guclu);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.telefon-ekran { border-radius: 33px; overflow: hidden; background: var(--siyah); padding: 26px 18px 22px; }
.tel-marka { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tel-logo {
  width: 52px; height: 52px; border-radius: 16px;
  border: 1px solid var(--cizgi-guclu);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; letter-spacing: -.02em;
  background: rgba(245,243,238,.04);
}
.tel-ad { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.tel-adres { font-size: 11.5px; color: var(--gri); }
.tel-karsilama { font-size: 13px; color: var(--acik-gri); margin-top: 4px; }
.tel-butonlar { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.tel-buton {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 0 14px;
  border-radius: 14px; border: 1px solid var(--cizgi);
  background: rgba(245,243,238,.03);
  font-size: 14px; font-weight: 500;
}
.tel-buton svg { width: 17px; height: 17px; stroke: var(--acik-gri); flex-shrink: 0; }
.tel-buton.one-cikan { border-color: rgba(var(--vurgu-rgb), .38); background: rgba(var(--vurgu-rgb), .10); }
.tel-buton.one-cikan svg { stroke: var(--vurgu); }
.tel-alt { text-align: center; font-size: 10.5px; color: var(--gri); margin-top: 18px; }

/* ---------- Kullanım alanları ---------- */
.sekmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.sekme {
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--cizgi); color: var(--acik-gri);
  font-size: 14.5px; font-weight: 500;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sekme:hover { border-color: var(--cizgi-guclu); }
.sekme[aria-selected="true"] { background: var(--kirik-beyaz); color: var(--siyah); border-color: var(--kirik-beyaz); }

.sekme-govde { margin-top: 30px; border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: clamp(24px, 3vw, 38px); background: rgba(245,243,238,.015); }
.sekme-panel { display: none; }
.sekme-panel.aktif { display: block; animation: yumusak 380ms ease both; }
@keyframes yumusak { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sekme-aksiyonlar { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Değer kartları ---------- */
.kartlar { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 2vw, 22px); margin-top: 48px; }
.kart { border: 1px solid var(--cizgi); border-radius: var(--r-l); padding: clamp(22px, 2.4vw, 30px); background: rgba(245,243,238,.015); }
.kart-ic { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(var(--vurgu-rgb), .22); background: rgba(var(--vurgu-rgb), .07); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.kart-ic svg { width: 18px; height: 18px; stroke: var(--vurgu); }
.kart p { color: var(--gri); font-size: 14.5px; line-height: 1.68; margin: 10px 0 0; }

/* ---------- Galeri ---------- */
.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 16px);
  margin-top: 44px;
}
.gal-oge {
  margin: 0;
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  background: rgba(245, 243, 238, .015);
}
/* İlk fotoğraf iki sütun + iki satır kaplar; kalan dördü yanında 2x2 dizilir. */
.gal-oge:first-child { grid-column: span 2; grid-row: span 2; }
.gal-gorsel { position: relative; aspect-ratio: 1; overflow: hidden; }
.gal-gorsel img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.gal-oge:hover .gal-gorsel img { transform: scale(1.045); }
.gal-bilgi {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 38px 15px 13px;
  background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,.88) 68%);
  pointer-events: none;
}
.gal-ad { font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; color: var(--kirik-beyaz); }
.gal-not { font-size: 12.5px; color: rgba(217, 217, 214, .7); margin-top: 2px; }
.gal-oge:first-child .gal-bilgi { padding: 52px 20px 18px; }
.gal-oge:first-child .gal-ad { font-size: clamp(17px, 1.5vw, 20px); }
.gal-oge:first-child .gal-not { font-size: 13.5px; }

/* ---------- SSS ---------- */
.sss-liste { margin-top: 40px; border-top: 1px solid var(--cizgi); }
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-soru {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; text-align: left; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; letter-spacing: -.015em;
}
.sss-isaret { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.sss-isaret::before, .sss-isaret::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--acik-gri);
  transform: translate(-50%,-50%); transition: transform 260ms ease, opacity 260ms ease;
}
.sss-isaret::before { width: 13px; height: 1.5px; }
.sss-isaret::after { width: 1.5px; height: 13px; }
.sss-oge.acik .sss-isaret::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.sss-oge.acik .sss-isaret::before { background: var(--vurgu); }
.sss-cevap { overflow: hidden; height: 0; transition: height 320ms cubic-bezier(.22,.61,.36,1); }
.sss-cevap-ic { padding: 0 0 24px; color: var(--gri); font-size: 15.5px; line-height: 1.72; max-width: 68ch; }

/* ---------- Son CTA ---------- */
.son-cta { background: var(--grafit); border-top: 1px solid var(--cizgi); }
.son-cta-ic { text-align: center; display: flex; flex-direction: column; align-items: center; }
.son-cta h2 { max-width: 20ch; }
.son-cta .metin { margin-left: auto; margin-right: auto; }
.son-cta .dugmeler { justify-content: center; }

/* ---------- Footer ---------- */
.alt { border-top: 1px solid var(--cizgi); padding: 46px 0 40px; }
.alt-ic { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
.alt-logo img { height: 28px; width: auto; opacity: .85; }
.alt-slogan { font-size: 14px; color: var(--gri); margin-top: 12px; }
.alt-linkler { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; color: var(--gri); }
.alt-linkler a:hover { color: var(--kirik-beyaz); }
.alt-yil { font-size: 13.5px; color: var(--gri); }

/* ---------- Görünme animasyonu ---------- */
.gorun { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1); }
.gorun.icerde { opacity: 1; transform: none; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
  .hero-izgara, .demo-izgara { grid-template-columns: 1fr; }
  .hero { padding-top: 112px; }
  .adimlar { grid-template-columns: 1fr; }
  .kartlar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .karsilastirma { grid-template-columns: 1fr; }
  .kars-ok { transform: rotate(90deg); padding: 4px 0; }
  .galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-oge:first-child { grid-column: span 2; grid-row: auto; }
  .gal-oge:first-child .gal-gorsel { aspect-ratio: 16 / 10; }
}

@media (max-width: 860px) {
  .nav-menu, .nav-sag .dugme { display: none; }
  .nav-ac { display: inline-flex; }
  .nav.acik .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 72px; left: 0; right: 0;
    background: rgba(11,11,12,.96);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi);
    padding: 8px var(--kenar) 18px;
  }
  .nav.acik .nav-menu a { padding: 15px 0; border-bottom: 1px solid var(--cizgi); font-size: 16px; }
  .nav.acik .nav-menu a:last-child { border-bottom: 0; }
  .nav.acik .nav-menu .nav-menu-demo {
    display: block; margin-top: 12px; border-bottom: 0;
    background: var(--kirik-beyaz); color: var(--siyah);
    border-radius: var(--r-s); text-align: center; font-weight: 600;
    min-height: 50px; line-height: 50px; padding: 0 20px;
  }
}

@media (max-width: 560px) {
  .nav-logo img { height: 28px; }
  .kartlar { grid-template-columns: 1fr; }
  .galeri-izgara { grid-template-columns: 1fr; }
  .gal-oge:first-child { grid-column: span 1; }
  .gal-oge:first-child .gal-gorsel { aspect-ratio: 4 / 3; }
  .dugmeler .dugme { width: 100%; }
  .telefon { width: 100%; max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .gorun { opacity: 1; transform: none; }
}


/* ---------- İçeriğe geç bağlantısı ---------- */
.atla {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--vurgu); color: var(--siyah);
  padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14px;
}
.atla:focus { left: 16px; }

/* ---------- Sekme paneli içi ---------- */
.sekme-ic { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(22px, 3vw, 40px); align-items: center; }
.sekme-ic:only-child { }
.sekme-sol { min-width: 0; }
.sekme-ad { font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 18px; }
.sekme-gorsel { border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--cizgi); }
.sekme-gorsel img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
.sekme-panel:not(:has(.sekme-gorsel)) .sekme-ic { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .sekme-ic { grid-template-columns: 1fr; }
  .sekme-gorsel img { max-height: 220px; }
}



/* ============================================================
   PLANLAR SAYFASI (/planlar)
   ============================================================ */
.plan-ust { padding-top: 132px; padding-bottom: 0; }
.plan-ust h1 { max-width: 20ch; text-wrap: balance; }
.plan-ust .metin { max-width: 62ch; }

.plan-bolum { padding-top: clamp(44px, 5vw, 64px); padding-bottom: var(--bolum); }

.plan-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  /* align-items varsayilan (stretch): kartlar esit yukseklikte olur, boylece
     alttaki butonlar ayni hizaya gelir. Ortadaki kartin negatif ust bosluğu
     onu yukari tasir; alt kenari yine diğerleriyle hizali kalir. */
}

/* Uc kart da ayni gorunumu paylasir: hafif vurgu renkli kenarlik, ustten
   asagi sonen zemin ve yumusak bir golge. Degerler bilerek dusuk tutuldu. */
.plan-kart {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--vurgu-rgb), .22);
  border-radius: var(--r-l);
  padding: clamp(24px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(var(--vurgu-rgb), .055) 0%, rgba(var(--vurgu-rgb), 0) 58%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) inset, 0 20px 50px rgba(var(--vurgu-rgb), .07);
}

/* Kartin arkasinda yumusak bir isima. z-index: -1 sayesinde kartin kendi
   zemininin arkasinda kalir; radial-gradient zaten yumusak oldugu icin
   ayrica blur kullanilmiyor (blur mobilde pahaliya mal olur). */
.plan-kart::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -20px -16px -12px;
  border-radius: 40px;
  background: radial-gradient(70% 66% at 50% 4%, rgba(var(--vurgu-rgb), .14), rgba(var(--vurgu-rgb), 0) 74%);
}

/* Ortadaki paket: hafifçe yukarıda, vurgu rengiyle çerçevelenmiş.
   Yükseltme için margin kullanılıyor — transform, .gorun animasyonuyla
   çakışırdı. */
/* Su an hicbir pakette kullanilmiyor. home-content.js icinde bir pakete
   "oneCikan: true" eklenirse o kart birkac piksel yukari cikar (butonu da
   gradyan olur). Renk ve isima yine hepsinde ayni kalir. */
.plan-kart.one-cikan {
  margin-top: -16px;
}

.plan-rozet-yer { min-height: 27px; margin-bottom: 16px; }
.plan-rozet {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  background: var(--vurgu-gradyan); color: var(--siyah);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--vurgu-isima);
}

.plan-ad { font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.02em; }
.plan-ozet { color: var(--gri); font-size: 14.5px; line-height: 1.62; margin: 10px 0 0; }

.plan-fiyat-kutu {
  margin-top: 22px; padding: 20px 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}
.plan-fiyat-satir { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.plan-fiyat-satir + .plan-fiyat-satir { margin-top: 10px; }
.plan-fiyat {
  font-size: clamp(25px, 2.5vw, 31px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
  background: var(--vurgu-gradyan);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan-birim { font-size: 13.5px; color: var(--gri); }

.plan-notlar { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 7px; }
.plan-notlar li { font-size: 12.5px; line-height: 1.55; color: var(--gri); }

.plan-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.plan-liste li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.58; color: var(--acik-gri); }
.plan-liste svg { width: 17px; height: 17px; flex: none; margin-top: 3px; stroke: var(--vurgu); }

.plan-alt { margin-top: auto; padding-top: 28px; }
.plan-alt .dugme { width: 100%; }

/* ---------- Ortak özellikler + sayfa notları ---------- */
.plan-ortak {
  margin-top: clamp(38px, 4.5vw, 56px);
  border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: clamp(22px, 2.4vw, 30px);
  background: rgba(245, 243, 238, .015);
}
.plan-ortak-baslik {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gri); margin: 0;
}
.plan-ortak-liste {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 11px 26px;
}
.plan-ortak-liste li { display: flex; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--acik-gri); }
.plan-ortak-liste svg { width: 15px; height: 15px; flex: none; margin-top: 3px; stroke: var(--vurgu); }

.plan-sayfa-notlari { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.plan-sayfa-notlari li {
  display: flex; gap: 10px;
  font-size: 13.5px; line-height: 1.6; color: var(--gri);
}
.plan-sayfa-notlari li::before {
  content: ""; flex: none; width: 3px; height: 3px; border-radius: 50%;
  background: var(--cizgi-guclu); margin-top: 10px;
}

/* ---------- Duyarlı ---------- */
/* Genis ekranda ozet satirlarini ayni yukseklikte tutup basliklari hizalar. */
@media (min-width: 1001px) {
  .plan-ozet { min-height: 70px; }
}

@media (max-width: 1000px) {
  .plan-izgara { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .plan-kart.one-cikan { margin-top: 0; }
  .plan-ust { padding-top: 112px; }
}

/* ============================================================
   PARTNERS SAYFASI (7 Eylül 2026)
   ============================================================
   Vitrindeki işletmelerin logo + ad kartları. Liste veritabanından
   geliyor (public_showcase), hangi işletmenin görüneceği yönetim
   panelinden tek tek seçiliyor.
   ============================================================ */
.ptr-ust { padding-top: 132px; padding-bottom: 0; }
.ptr-ust h1 { max-width: 20ch; text-wrap: balance; }
.ptr-ust .metin { max-width: 62ch; }

.ptr-bolum { padding-top: clamp(44px, 5vw, 64px); padding-bottom: var(--bolum); }

.ptr-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.ptr-kart {
  display: flex; flex-direction: column;
  /* Kartin kendi ic boslugu yok: logo plakasi kenardan kenara oturuyor,
     yazi kendi boslugunu tasiyor. overflow gizli olmasa plakanin kose
     yuvarlakligi kartin disina tasardi. */
  overflow: hidden;
  border: 1px solid rgba(var(--vurgu-rgb), .18);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, rgba(var(--vurgu-rgb), .05) 0%, rgba(var(--vurgu-rgb), 0) 62%);
  color: var(--kirik-beyaz);
  text-decoration: none;
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.ptr-kart:hover {
  border-color: rgba(var(--vurgu-rgb), .38);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(var(--vurgu-rgb), .10);
}

/* Logolar cok farkli bicimlerde geliyor (genis yazi logosu, kare amblem,
   saydam PNG). Acik renkli plaka hepsini okunur kiliyor. Plaka kartin
   genisligini tamamen dolduruyor; logo da plakayi dolduracak kadar
   buyuyor ama object-fit: contain oldugu icin ASLA kirpilmiyor. */
.ptr-logo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* SAF BEYAZ olmasi onemli: yuklenen logolarin cogunda beyaz zemin gomulu
     geliyor. Plaka da saf beyaz olunca o zemin plakayla birlesiyor ve kartin
     icinde farkli renkte bir dikdortgen gorunmuyor. */
  background: #FFFFFF;
  overflow: hidden;
}
/* Saydam zeminli ve ACIK renkli logolar beyaz plakada kaybolurdu; bu sinifi
   partners.html olcup kendisi veriyor. */
.ptr-logo.koyu { background: #14151A; }
/* Gorsel akistan cikarilmis (absolute): akista birakilirsa kare logolar
   kutuyu asagi dogru gerip plakayi kartlar arasinda farkli yuksekliklere
   sokuyor. Absolute olunca yuksekligi aspect-ratio belirliyor, logo da
   plakayi dolduruyor; contain sayesinde kirpilmiyor. */
.ptr-logo img {
  position: absolute; inset: 6%;
  width: 88%; height: 88%;
  object-fit: contain;
}
.ptr-harf {
  font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -.02em;
  color: var(--grafit-acik);
}

.ptr-ad {
  padding: 14px 16px 18px;
  font-size: 15px; font-weight: 600; text-align: center;
  overflow-wrap: anywhere;
}

.ptr-durum {
  grid-column: 1 / -1;
  margin: 0; padding: 44px 16px;
  text-align: center; color: var(--gri); font-size: 14px;
  border: 1px dashed var(--cizgi-guclu);
  border-radius: var(--r-l);
}

@media (max-width: 560px) {
  .ptr-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}