:root{
  --accent-1: #ee3435;
  --accent-2: #a91e24;
  --accent-3: #8a161c;
  --dark: #070606;
  --muted: #c9c0bf;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --nav-glow: 0 10px 40px rgba(238,52,53,0.12);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
  background: linear-gradient(180deg,#050405 0%, #0a0606 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:#fff;background:linear-gradient(180deg,#050405 0%, #0a0606 100%)}
.container{max-width:1200px;margin:0 auto;padding:1rem}

/* Header */
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.001rem 1rem}
.brand{display:flex;align-items:center;gap:8px;color:var(--accent-1);font-weight:900}
.logo-small{width:100px;height:100px;filter:drop-shadow(0 8px 22px rgba(238,52,53,0.06))}
.brand-text{font-size:2.05rem;letter-spacing:0.6px}

/* =======================
   HEADER / NAV (düzen)
   ======================= */

/* Header arkaplanın (senin kırmızı glow) */
.site-header{
  position: relative;
  z-index: 120;

  background:
    radial-gradient(1200px 220px at 50% 0%,
      rgba(238,52,53,0.18) 0%,
      rgba(138,22,28,0.06) 55%,
      rgba(0,0,0,0) 75%
    ),
    linear-gradient(180deg,
      rgba(10,4,4,0.92) 0%,
      rgba(6,3,3,0.78) 100%
    );

  border-bottom: 1px solid rgba(238,52,53,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Container tekrar padding ile bozulmasın */
.site-header .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1.2rem; /* sağ-sol boşluk */
}

/* Solda logo/yazı - sağda nav olacak */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Brand sol tarafa “yapışık” dursun */
a.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none !important;
  flex: 0 0 auto;
}

/* Brand üstüne gelince imleç el olsun */
a.brand,
a.brand *{
  cursor: pointer;
}

/* Logo boyutu (nav içinde daha küçük istiyorsan ayrı class açman daha iyi ama şimdilik) */
.logo-small{
  width: 82px;
  height: 82px;
}

/* Brand text alt çizgi vs olmasın */
.brand-text{
  text-decoration:none !important;
  white-space: nowrap;
}

/* NAV sağ tarafa */
.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 1.05rem;
  flex: 1 1 auto; /* nav alanı büyüsün, sağa yaslansın */
}

/* CTA (Sunucuya Katıl) en sağda kalsın */
.main-nav .cta{
  margin-left: 0.6rem; /* linklerden biraz ayrışsın */
}

/* Brand link underline fix (Nexus Bots alt çizgiyi kaldır) */
a.brand,
a.brand:visited,
a.brand:hover,
a.brand:active{
  text-decoration: none !important;
}


/* ---------- Brand: Nexus Bots'u büyüt, alt çizgiyi kaldır ve animasyon ekle  ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 18px;           /* logo ile yazı arası boşluk */
  flex-wrap: nowrap;   /* satıra kırılmayı engeller */
}
.site-header{
  position: relative;  /* sticky kapandı */
  top: auto;           /* garanti */
  z-index: 120;

  /* senin eklediğin gradient arkaplan kalsın */
  background:
    radial-gradient(1200px 220px at 50% 0%,
      rgba(238,52,53,0.18) 0%,
      rgba(138,22,28,0.06) 55%,
      rgba(0,0,0,0) 75%
    ),
    linear-gradient(180deg,
      rgba(10,4,4,0.92) 0%,
      rgba(6,3,3,0.78) 100%
    );

  border-bottom: 1px solid rgba(238,52,53,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



/* Nexus Bots metnini yayma + animasyonlu gradient ve glow */
.brand-text {
  display: inline-block;
  white-space: nowrap;           /* kesinlikle satıra kırılmasın */
  font-size: 1.72rem;            /* büyüttük — estetik denge için ayar */
  letter-spacing: 2px;
  word-spacing: 8px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;         /* alt çizgi kaldırıldı */
  position: relative;
  padding: 2px 0;
  /* gradient text (hareket eden) */
  background: linear-gradient(90deg, #ff8a8a 0%, var(--accent-1) 40%, #ffb3b3 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: transform .18s ease;
  will-change: transform, background-position, text-shadow;
}


/* hareketli gradient + hafif pulse glow */
@keyframes brandGradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes brandPulse {
  0%   { text-shadow: 0 0 0 rgba(238,52,53,0); transform: translateY(0); }
  50%  { text-shadow: 0 10px 36px rgba(238,52,53,0.10); transform: translateY(-2px); }
  100% { text-shadow: 0 0 0 rgba(238,52,53,0); transform: translateY(0); }
}

/* animasyonları uygula (sürekli ama sakin) */
.brand-text {
  animation: brandGradient 6.5s linear infinite, brandPulse 5.8s ease-in-out infinite;
}

/* Hover'da küçük vurgulama (isteğe bağlı) */
.brand-text:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Nav linklerini biraz daha büyüt ve estetik denge ver */
.site-header .main-nav .nav-link {
  font-size: 1.12rem;
  padding: 0.6rem 1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

/* Küçük ekranlarda taşma olursa otomatik küçültme */
@media (max-width:900px) {
  .brand-text {
    font-size: 1.2rem;
    letter-spacing: 1px;
    word-spacing: 4px;
  }
}

/* Erişilebilirlik: reduced motion kullanıcıları için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .brand-text,
  .brand-text::after {
    animation: none !important;
    transition: none !important;
    text-shadow: none !important;
    transform: none !important;
  }
}

/* Nav: yazının altındaki çizgiyi yok etme; animasyonlu şeyler ekleme(üsteki) */
.main-nav{display:flex;gap:1.25rem;align-items:center}
.nav-link{position:relative;padding:0.45rem 0.7rem;border-radius:6px;font-weight:700;color:#fff;opacity:0.98;transition:transform .18s, color .18s}
.nav-link{text-decoration:none}
.nav-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  width:72%;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  transition:transform .28s cubic-bezier(.2,.9,.2,1), opacity .28s;
  opacity:0;
}
.nav-link:hover{transform:translateY(-4px); color:#fff}
.nav-link:hover::after{transform:translateX(-50%) scaleX(1); opacity:1}

/* CTA button on nav */
.cta{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));padding:0.55rem 0.9rem;border-radius:12px;color:#060406;box-shadow:var(--nav-glow)}

/* gri bok sikme */
.header .grey-box, .header-right{display:none !important}

/* arkaplan kablo ve noktacıklar */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cable-bg{position:absolute;left:-20%;top:-10%;width:140%;height:120%;opacity:0.18;mix-blend-mode:screen}
.bg-particles{position:absolute;inset:0}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(238,52,53,0.16);box-shadow:0 8px 20px rgba(238,52,53,0.06)}
.p1{left:6%;top:12%;animation:particleMove 8s ease-in-out infinite}
.p2{left:18%;top:42%;animation:particleMove 9s ease-in-out infinite .3s;transform:scale(.9)}
.p3{left:32%;top:18%;animation:particleMove 10s ease-in-out infinite .6s}
.p4{left:46%;top:62%;animation:particleMove 7.5s ease-in-out infinite .2s;transform:scale(1.1)}
.p5{left:60%;top:28%;animation:particleMove 11s ease-in-out infinite .8s}
.p6{left:74%;top:48%;animation:particleMove 9.8s ease-in-out infinite .4s;transform:scale(.85)}
.p7{left:88%;top:18%;animation:particleMove 12s ease-in-out infinite 1.2s}
.p8{left:92%;top:68%;animation:particleMove 13s ease-in-out infinite 1.6s}
.p9{left:40%;top:6%;animation:particleMove 14s ease-in-out infinite .9s;transform:scale(.6)}
.p10{left:24%;top:78%;animation:particleMove 16s ease-in-out infinite 1.5s;transform:scale(.7)}
@keyframes particleMove {0%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-20px) scale(1.2);opacity:.55}100%{transform:translateY(0) scale(1);opacity:1}}

/* ortalandı + çerçeve */
.section{position:relative;text-align:center;padding:3rem 0;z-index:2}
.section-title{font-size:2.6rem;margin-bottom:0.4rem;font-weight:800}
.framed-section{
  margin:1.2rem auto;
  padding:30px;
  border-radius:16px;
  position:relative;
  overflow:visible;
  background: linear-gradient(180deg, rgba(12,6,6,0.45), rgba(6,3,3,0.25));
}

/* iyileştirilmiş çerçeve: görünür sınır + parlak dış sınır */
.framed-section::before{
  content:"";
  position:absolute;
  top:-8px;
  left:-8px;
  right:-8px;
  bottom:-8px;
  border-radius:20px;
  background: radial-gradient(ellipse at center, rgba(238,52,53,0.09), rgba(138,22,28,0.03));
  filter: blur(12px);
  opacity:1;
  pointer-events:none;
  z-index:-1;
}
.framed-section::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:14px;
  border:2px solid rgba(238,52,53,0.14);
  pointer-events:none;
  z-index:3;
}

/*Pricing*/
/* =======================
   PRICING (fiyatlandirma.html) — yeni sistem
   ======================= */

/* 3 sütun grid */
.pricing-grid-three{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  align-items:stretch;
  margin-top:1.6rem;
}

/* kart */
.pricing-card{
  min-height:420px;
  padding:2rem;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(12,6,6,0.55), rgba(6,3,3,0.25));
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 20px 70px rgba(0,0,0,0.55);
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  gap:16px;

  transform: translateY(0);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, border-color .28s;
}

/* kartın “framed glow” hissi */
.pricing-card::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:22px;
  background: radial-gradient(ellipse at center, rgba(238,52,53,0.10), rgba(138,22,28,0.02));
  filter: blur(14px);
  opacity:0;
  transition: opacity .28s ease;
  pointer-events:none;
  z-index:0;
}

/* kart hover (3 kartın da aynı) */
.pricing-card:hover{
  transform: translateY(-10px);
  box-shadow:0 60px 160px rgba(238,52,53,0.10);
  border-color: rgba(238,52,53,0.16);
}
.pricing-card:hover::before{ opacity:1; }

/* Ortadaki kart: hover olmadan da “yanık” dursun */
.pricing-card.always-highlight{
  border-color: rgba(238,52,53,0.18);
  box-shadow:0 55px 150px rgba(238,52,53,0.10);
}
.pricing-card.always-highlight::before{ opacity:1; }

/* rozet (POPÜLER / EN AVANTAJLI) — sağ üst */
.pricing-card .ribbon{
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:.82rem;
  color:#120606;
  background: linear-gradient(90deg, #ffd27a, #ff8a6b);
  box-shadow:0 10px 30px rgba(255,160,80,0.10);
  z-index:2;
}

/* head */
.pricing-card .price-head{ position:relative; z-index:1; text-align:left; }
.pricing-card .plan-title{ margin:0 0 .3rem 0; font-size:1.55rem; font-weight:900; }
.pricing-card .pricing-price{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:2.8rem;
  font-weight:900;
}
.pricing-card .price-amount{ color:var(--accent-1); }
.pricing-card .price-unit{ font-size:1rem; color:#ffdede; font-weight:800; opacity:.9; }

/* eski fiyat */
.pricing-card .old-price{
  font-size:0.95rem;
  opacity:0.55;
  text-decoration:line-through;
  color:#fff;
}

/* indirim kutucuğu (3 aylık) */
.discount-note{
  margin-top:10px;
  display:inline-block;
  padding:5px 10px;
  border-radius:10px;
  font-weight:900;
  font-size:.88rem;
  color:#fff;
  background: linear-gradient(90deg, #ff9a7f, #ff6a6a);
  box-shadow:0 12px 34px rgba(255,100,100,0.10);
}

/* yıllık için aynı kutucuk ama yazısı farklı */
.discount-note.yearly-note{
  background: linear-gradient(90deg, #ffd27a, #ff8a6b);
}

/* feature list */
.pricing-card .plan-features{
  position:relative;
  z-index:1;
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#ffdede;
  font-weight:800;
}
.pricing-card .plan-features li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.pricing-card .plan-features li::before{
  content:"✔";
  color:#9ff0b6;
  font-weight:900;
}

/* CTA en altta */
.pricing-cta{ margin-top:auto; position:relative; z-index:1; }
.pricing-btn{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0.95rem 1rem;
  border-radius:14px;
  font-weight:900;
  text-decoration:none;

  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color:#fff;
  box-shadow:0 18px 50px rgba(238,52,53,0.10);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

/* buton “sheen” animasyonu (hover) */
.pricing-btn::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-160%;
  width:60%;
  height:140%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  opacity:0;
  transition: opacity .2s ease;
}
.pricing-btn:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:0 34px 90px rgba(238,52,53,0.16);
  filter: brightness(1.03);
}
.pricing-btn:hover::before{
  opacity:1;
  animation: pricingSheen 900ms ease forwards;
}
@keyframes pricingSheen{
  0%{ left:-160%; }
  100%{ left:140%; }
}

/* responsive */
@media (max-width:1100px){
  .pricing-grid-three{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .pricing-grid-three{ grid-template-columns:1fr; }
}

/* HERO */
.hero{padding:12rem 0 10rem;min-height:480px;display:flex;align-items:center;justify-content:center}
.hero-center{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;max-width:1100px;margin:0 auto}
.hero-text.centered{max-width:920px}
.hero-title.xlarge{font-size:4.2rem;line-height:1.02;margin:0;font-weight:900;letter-spacing:0.6px;color:#fff;text-shadow:0 8px 36px rgba(169,30,36,0.08)}
.lead.wide{font-size:1.18rem;color:#ffdede;max-width:920px;margin:0 0 1rem 0}

/* --- Hero: başlığı satır satır (Nexus Bots / Sunucu Yönetiminde / Profesyonel Çözümler) --- */
.hero-title.xlarge {
  display: block;
  line-height: 1.02;
}

/* marka satırı: Nexus Bots — şimdi diğer ana satırlarla aynı büyüklükte */
.hero-title.xlarge .hero-brand-line {
  display: block;
  font-size: 4.2rem;        /* ana satır ile eşit */
  font-weight: 900;
  color: var(--accent-1);
  margin-bottom: 0.22rem;
  letter-spacing: 1px;
  line-height: 1;          /* sıkı hizalama */
}

/* ana büyük satırlar */
.hero-title.xlarge .hero-line {
  display: block;
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1.02;
  margin: 0;
  word-break: break-word;
}

/* Eğer accent span'ı varsa gradient/text-clip stilleri zaten uygulanıyordur.
   Boş ruleset olmasın diye aşağıdaki satırı boş bırakma (kaldırılmıştır). */

/* Responsive: küçük ekranlarda boyutları küçült */
@media (max-width:1100px) {
  .hero-title.xlarge .hero-line,
  .hero-title.xlarge .hero-brand-line { font-size: 2.6rem; }
  .hero-title.xlarge .hero-brand-line { margin-bottom: 0.35rem; }
}
@media (max-width:700px) {
  .hero-title.xlarge .hero-line,
  .hero-title.xlarge .hero-brand-line { font-size: 2.0rem; }
}



/* Responsive: küçük ekranlarda büyük satırları küçült */
@media (max-width:1100px) {
  .hero-title.xlarge .hero-line { font-size: 2.6rem; }
  .hero-title.xlarge .hero-brand-line { font-size: 0.98rem; margin-bottom: 0.35rem; }
}
@media (max-width:700px) {
  .hero-title.xlarge .hero-line { font-size: 2.0rem; }
  .hero-title.xlarge .hero-brand-line { font-size: 0.95rem; }
}

/* accent (red) inline words */
.accent, .accent-text{ color:var(--accent-1); font-weight:800; position:relative; display:inline-block; transition: transform .28s, text-shadow .28s; }
.accent { animation: accentPulse 6s ease-in-out infinite; }
@keyframes accentPulse {
  0% { text-shadow: 0 0 0 rgba(238,52,53,0.0); transform: translateY(0); }
  40% { text-shadow: 0 6px 20px rgba(238,52,53,0.12); transform: translateY(-2px); }
  100% { text-shadow: 0 0 0 rgba(238,52,53,0.0); transform: translateY(0); }
}

/* CTA animations: pulse + hover pop */
.animated-cta{position:relative;transition:transform .18s ease, box-shadow .18s ease}
.animated-cta::after{
  content:"";
  position:absolute;inset:-6px;border-radius:14px;background:radial-gradient(circle at 50% 20%, rgba(238,52,53,0.12), transparent 20%);opacity:0;transform:scale(0.98);transition:opacity .28s, transform .28s;pointer-events:none;
}
.animated-cta:hover{transform:translateY(-6px) scale(1.02)}
.animated-cta:hover::after{opacity:1;transform:scale(1.02)}
@keyframes ctaPulse { 0%{box-shadow:0 8px 24px rgba(238,52,53,0.08)}50%{box-shadow:0 18px 44px rgba(238,52,53,0.12)}100%{box-shadow:0 8px 24px rgba(238,52,53,0.08)} }
.btn.primary.animated-cta{animation: ctaPulse 4.2s ease-in-out infinite}

/* Buttons */
.btn{display:inline-block;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.06);padding:0.6rem 0.9rem;border-radius:10px;cursor:pointer;font-weight:800;background:transparent}
.btn.primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#fff;border:0;box-shadow:0 12px 36px rgba(238,52,53,0.08)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#ffdede}
.btn.ghost{background:transparent;color:#ffdede}
.btn.big{padding:0.9rem 1.4rem;font-size:1rem;border-radius:14px}
.btn.large-cta{padding:0.85rem 1.2rem;font-size:1rem;border-radius:12px}

/* FEATURES */
.features-extended{padding:3rem 0}
.centered-grid{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem}
.feature-card{width:620px;max-width:94%;padding:1.6rem;border-radius:14px;background:linear-gradient(180deg, rgba(18,6,6,0.6), rgba(0,0,0,0.35));border:1px solid rgba(255,255,255,0.02);text-align:left;opacity:0;transform:translateY(18px);transition:transform .55s,opacity .55s}
.feature-card.revealed{opacity:1;transform:none}
.feature-card h3{font-size:1.3rem;margin:0 0 6px 0}
.feature-card p{color:#ffdede;line-height:1.5}
.feature-card::before{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%) scaleX(0);width:92%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));transition:transform .32s cubic-bezier(.2,.9,.2,1);opacity:0.95}
.feature-card:hover::before{transform:translateX(-50%) scaleX(1)}
.feature-card:hover{box-shadow:0 36px 90px rgba(238,52,53,0.12);transform:translateY(-10px)}



/* testimonials & team */
.testimonials-grid{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.testimonial{width:520px;max-width:94%;padding:1.2rem;border-radius:12px;background:linear-gradient(180deg, rgba(12,4,4,0.6), rgba(0,0,0,0.38));border:1px solid rgba(255,255,255,0.02);text-align:left;color:#ffdede}
.team-grid{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.team-card{width:260px;max-width:92%;padding:1.1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg, rgba(12,4,4,0.5), rgba(0,0,0,0.38));text-align:center}
.team-card .role{color:var(--muted);margin-top:0.4rem}
/* ---------- Avatar normalize: team / profile resimlerini sabitle ---------- */
/* Genel avatar sınıfı (team, testimonials, support vs. için ortak) */
img.avatar,
img.tc-avatar,
.sc-avatar {
  display: block;
  width: 88px;        /* hedef boyut — diğer avatarlarla uyumlu olacak şekilde ayarla */
  height: 88px;       /* kare yapıyoruz; object-fit ile kırpma uygulanır */
  border-radius: 999px;
  object-fit: cover;  /* resmi kırparak kutuya sığdırır (tükenmez/kaymaz) */
  object-position: center center;
  margin: 0 auto;     /* centerlamak için (team-card içindeyse) */
  border: 1px solid rgba(255,255,255,0.04);
  background-color: #0b0b0b; /* yüklenmeme durumunda nötr arka plan */
}

/* Eğer team kartlarında farklı bir konumlandırma varsa daha spesifik kural:
   .team-card img.avatar { width:88px; height:88px; } 
   Bu kural, sadece team-card içindeki avatarları etkiler. */

/* Responsive: küçük ekranlarda biraz küçült */
@media (max-width:900px) {
  img.avatar,
  img.tc-avatar,
  .sc-avatar { width:64px; height:64px; }
}

/* feedback & modal */
.feedback-form{max-width:860px;margin:0 auto;text-align:left}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.76);z-index:200}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:linear-gradient(180deg,#0b0505,#140606);border-radius:12px;padding:1.2rem;max-width:920px;width:94%;position:relative;box-shadow:0 20px 60px rgba(55,18,17,0.6)}
.modal-close{position:absolute;right:0.6rem;top:0.6rem;background:none;border:0;color:var(--muted);font-size:1.2rem}

/* reveal helper */
.revealed{opacity:1 !important;transform:translateY(0) !important}

/* responsive */
@media (max-width:1100px){
  .hero-title.xlarge{font-size:2.6rem}
  .price-card{width:92%;min-height:auto}
  .feature-card{width:92%}
  .main-nav{display:none}
  .menu-toggle{display:inline-block}
  .container{padding:1.2rem}
}
.feedback-inner { max-width:980px; margin:0 auto; position:relative; z-index:3; }

.feedback-form {
  background: linear-gradient(180deg, rgba(12,6,6,0.15), rgba(6,3,3,0.06));
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
}

/* Grid: two columns on wide screens */
.form-grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  align-items:start;
  margin-bottom:12px;
}

/* Extra row for file + priority */
.form-grid-extra {
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

/* Make last controls full width on small screens */
@media (max-width:900px){
  .form-grid, .form-grid-extra { grid-template-columns: 1fr; }
}

/* Field wrapper */
.field { display:flex; flex-direction:column; gap:8px; position:relative; }
.field.full { grid-column: 1 / -1; }
.field .field-label { font-weight:700; color:#ffdede; font-size:0.95rem; }

/* Inputs, select, textarea common */
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form input[type="file"],
.feedback-form select,
.feedback-form textarea {
  background: linear-gradient(180deg, rgba(15,15,15,0.65), rgba(18,14,14,0.5));
  border: 1px solid rgba(255,255,255,0.04);
  padding:10px 12px;
  border-radius:10px;
  color:#fff;
  font-size:0.98rem;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .10s ease;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.25);
}

/* Placeholder color */
.feedback-form input::placeholder,
.feedback-form textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

/* File input styling (simple) */
.file-field input[type="file"] { padding:6px 10px; }

/* Select caret fix */
.feedback-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.12) 50%), linear-gradient(135deg, rgba(255,255,255,0.12) 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* Textarea min-height */
.feedback-form textarea { min-height:120px; resize:vertical; line-height:1.4; }

/* Focus styles: clear red glow and stronger border */
.feedback-form input:focus,
.feedback-form textarea:focus,
.feedback-form select:focus {
  border-color: rgba(238,52,53,0.9);
  box-shadow: 0 8px 32px rgba(238,52,53,0.12);
  transform: translateY(-1px);
}

/* Form meta text */
.form-meta .muted { margin:8px 0 12px 0; color:var(--muted); font-size:0.9rem; }

/* Actions layout */
.form-actions { display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.form-actions .btn { padding:0.7rem 1.05rem; font-weight:800; border-radius:10px; }
.form-actions .btn.outline { border: 1px solid rgba(255,255,255,0.06); background:transparent; color:#ffdede; }
.form-actions .form-message { margin-left:8px; color:var(--accent-1); font-weight:700; }

/* Error / success styles for runtime messages (main.js will update .form-message) */
.form-message.error { color: #ff7b7b; }
.form-message.success { color: #a8ffd6; }

/* Small refinements */
.feedback-form label { font-size:0.95rem; }
.feedback-form .field-label { opacity:0.95; }

/* Make sure framed-section look remains (no change to existing frame) */

/* Accessibility helpers */
.feedback-form input:invalid { box-shadow: 0 6px 22px rgba(238,52,53,0.06); }

/* End of feedback form styles */
.file-input-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  width:100%;
}
.file-input-wrapper input[type="file"] {
  /* gizle ama erişilebilir kalsın */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* file button */
.file-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0.30rem 0.8rem;
  border-radius:10px;
  background: linear-gradient(90deg, rgba(238,52,53,0.98), rgba(169,30,36,0.95));
  color:#fff;
  font-weight:800;
  border:0;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(238,52,53,0.12);
  transition: transform .18s ease, box-shadow .28s ease, filter .18s;
  font-size:0.95rem;
}
.file-btn svg { opacity:0.95; transform: translateY(0); }

/* hover / active */
.file-btn:hover{ transform: translateY(-4px) scale(1.01); filter:brightness(1.03) }
.file-btn:active{ transform: translateY(-2px) }

/* file name box */
.file-name {
  flex:1;
  min-width:0;
  padding:0.48rem 0.7rem;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(18,18,18,0.55), rgba(12,12,12,0.35));
  color: rgba(255,255,255,0.92);
  font-weight:600;
  font-size:0.95rem;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.25);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition: box-shadow .18s, transform .12s;
}

/* when a file is selected highlight the name */
.file-input-has-file .file-name {
  box-shadow: 0 10px 30px rgba(238,52,53,0.08);
  transform: translateY(-2px);
}

/* clear button */
.file-clear {
  background: rgba(255,255,255,0.06);
  border: 0;
  color: #fff;
  padding:0.38rem 0.6rem;
  border-radius:8px;
  cursor:pointer;
  font-weight:800;
  transition: background .18s, transform .12s;
}
.file-clear:hover{ background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.file-clear:active{ transform: translateY(0) }

/* small animation when filename updates */
@keyframes filePulse {
  0% { box-shadow: 0 0 0 rgba(238,52,53,0); transform:scale(1); }
  30% { box-shadow: 0 16px 48px rgba(238,52,53,0.12); transform:scale(1.01); }
  100% { box-shadow: 0 0 0 rgba(238,52,53,0); transform:scale(1); }
}
.file-name.anim { animation: filePulse 850ms ease-in-out; }

/* responsive: stack elements on mobile */
@media (max-width:640px){
  .file-input-wrapper{ flex-direction:column; align-items:stretch; gap:8px; }
  .file-btn{ width:100%; justify-content:center; }
  .file-name{ width:100%; }
  .file-clear{ align-self:flex-end; }
}
/* ---------- Animasyonlu seçimler özel (ekleme) ---------- */
.custom-select { position: relative; display: inline-block; width: 100%; font-weight:700; }
.custom-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  background: linear-gradient(180deg, rgba(18,18,18,0.6), rgba(10,10,10,0.4));
  color:#fff; border:1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.25);
  transition: box-shadow .18s, transform .12s, border-color .18s;
}
.custom-trigger .label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ffdede; font-weight:700; }
.custom-trigger .arrow { width:18px; height:18px; transform-origin:center; transition: transform .28s ease; color:#ffdede; }

.custom-select.open .custom-trigger { border-color: rgba(238,52,53,0.95); box-shadow: 0 14px 44px rgba(238,52,53,0.08); transform: translateY(-2px); }
.custom-select.open .arrow { transform: rotate(180deg); }

.custom-options {
  position:absolute; left:0; right:0; margin-top:10px; border-radius:10px;
  background: linear-gradient(180deg, rgba(18,18,18,0.98), rgba(12,12,12,0.96));
  border:1px solid rgba(255,255,255,0.04); max-height:220px; overflow:auto; z-index:60;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6); opacity:0; transform: translateY(-6px);
  pointer-events:none; transition: opacity .22s ease, transform .22s ease;
}

.custom-select.open .custom-options { opacity:1; transform: translateY(0); pointer-events:auto; }

.custom-option { padding:10px 12px; font-weight:700; color:#ffdede; cursor:pointer; transition: background .14s, color .14s; }
.custom-option:not(:last-child){ border-bottom:1px solid rgba(255,255,255,0.02); }
.custom-option:hover, .custom-option.highlight { background: linear-gradient(90deg, rgba(238,52,53,0.06), rgba(169,30,36,0.02)); color:#fff; }
.custom-option.selected { font-weight:900; color:#fff; background: linear-gradient(90deg, rgba(238,52,53,0.06), rgba(169,30,36,0.02)); }

.custom-trigger .arrow svg { display:block; width:100%; height:100%; fill: currentColor; }
.custom-trigger:focus { outline:none; box-shadow: 0 0 0 3px rgba(238,52,53,0.06); }

@media (max-width:640px){
  .custom-options { max-height:180px; }
}


/* ---------- Testimonials carousel (referanslar) - HIZLI VERSIYON ---------- */
.testimonials-carousel { margin-top: 1.2rem; position: relative; z-index: 4; }
.carousel-viewport { overflow: hidden; width: 100%; padding: 12px 0; }
.carousel-track {
  display:flex;
  gap:1.2rem;
  align-items:stretch;
  will-change: transform;
  transform: translate3d(0,0,0); /* start */
  padding-bottom: 6px;
  /* NOT: no CSS animation here — JS will animate smoothly */
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Testimonial kart */
.testimonial-card {
  width: 360px;
  min-width: 320px;
  max-width: 38%;
  background: linear-gradient(180deg, rgba(12,8,8,0.6), rgba(10,6,6,0.45));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 16px;
  color: #ffdede;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}

/* top row: avatar + stars */
.testimonial-card .tc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tc-avatar { width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,0.04); object-fit:cover; background: #111; }
.tc-stars { color: #ffcf33; font-weight:900; letter-spacing: 1px; }

/* quote */
.tc-quote { font-size:1rem; line-height:1.45; color:#fff; margin:0; padding-top:4px; }
/* author */
.tc-author { font-size:0.85rem; color:var(--muted); font-weight:700; }

/* hover effect to slightly lift card and increase emphasis */
.testimonial-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 90px rgba(238,52,53,0.06);
}

/* pause animation on hover or focus inside carousel */
.testimonials-carousel:hover .carousel-track,
.testimonials-carousel:focus-within .carousel-track { cursor: grabbing; }

/* responsive adjustments: hızları da küçültüyoruz */
@media (max-width:1100px) {
  .testimonial-card { width: 300px; min-width: 280px; }
  .carousel-track { gap: 1rem; animation-duration: 12s; }
}
@media (max-width:700px) {
  .carousel-track { gap: 12px; animation-duration: 10s; }
  .testimonial-card { width: 80%; min-width: 260px; max-width: 260px; }
}

/* top row: avatar + stars */
.testimonial-card .tc-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tc-avatar { width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,0.04); object-fit:cover; background: #111; }
.tc-stars { color: #ffcf33; font-weight:900; letter-spacing: 1px; }

/* quote */
.tc-quote { font-size:1rem; line-height:1.45; color:#fff; margin:0; padding-top:4px; }
/* author */
.tc-author { font-size:0.85rem; color:var(--muted); font-weight:700; }

/* hover effect to slightly lift card and increase emphasis */
.testimonial-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 90px rgba(238,52,53,0.06);
}

/* pause animation on hover or focus inside carousel */
.testimonials-carousel:hover .carousel-track,
.testimonials-carousel:focus-within .carousel-track { cursor: grabbing; }

/* responsive adjustments */
@media (max-width:1100px) {
  .testimonial-card { width: 300px; min-width: 280px; }
  .carousel-track { gap: 1rem; animation-duration: 24s; }
}
@media (max-width:700px) {
  .carousel-track { gap: 12px; animation-duration: 20s; }
  .testimonial-card { width: 80%; min-width: 260px; max-width: 260px; }
}





/* ---------- NAV ve CTA vurgu: üst linkleri büyüt & Invite butonuna dikkat çekici animasyon ---------- */

/* Nav linkleri biraz daha büyük ve güçlendirilmiş */
.site-header .main-nav .nav-link {
  font-size: 1.05rem;        /* biraz daha büyük */
  padding: 0.55rem 0.9rem;   /* hafif daha geniş tık alanı */
  letter-spacing: 0.2px;
  font-weight: 800;
}

/* Büyük ekranlarda daha da belirgin */
@media (min-width:1100px) {
  .site-header .main-nav .nav-link { font-size: 1.15rem; padding: 0.6rem 1rem; }
}

/* Sunucuya Katıl butonunu ekstra dikkat çekici yap (sürekli hafif animasyon) */
#inviteBtn.cta {
  position: relative;
  z-index: 140;
  overflow: visible;
  transition: transform .18s ease, box-shadow .25s ease;
  will-change: transform, box-shadow;
}

/* yüzer hareket */
@keyframes ctaFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* parıltı / glow animasyonu */
@keyframes ctaGlow {
  0%   { box-shadow: 0 10px 26px rgba(238,52,53,0.06); }
  50%  { box-shadow: 0 28px 80px rgba(238,52,53,0.12); }
  100% { box-shadow: 0 10px 26px rgba(238,52,53,0.06); }
}

/* kayan ince degrade arka plan (ince, hover altında görünürlük artırır) */
@keyframes ctaSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* aktif animasyon sınıfı - sadece inviteBtn hedefleniyor */
#inviteBtn.cta {
  animation: ctaFloat 6s ease-in-out infinite, ctaGlow 4s ease-in-out infinite;
}

/* ince kayan degrade pseudo-element (alt parlaklık) */
#inviteBtn.cta::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(238,52,53,0.06) 0%, rgba(169,30,36,0.03) 50%, rgba(238,52,53,0.04) 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: blur(12px);
  transform: translateZ(0);
  background-size: 200% 100%;
  animation: ctaSlide 8s linear infinite;
}

/* hover da efektleri güçlendir */
#inviteBtn.cta:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 40px 110px rgba(238,52,53,0.16);
}

/* fare ile etkileşimde değilken de hafif pulse (opsiyonel, ince) */
#inviteBtn.cta:focus { outline: 3px solid rgba(238,52,53,0.08); }

/* Erişilebilirlik: reduced motion kullanıcıları için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  #inviteBtn.cta,
  #inviteBtn.cta::after {
    animation: none !important;
    transition: none !important;
  }
  .site-header .main-nav .nav-link { transition: none !important; }
}
/* Temel buton düzeni (hero içindeki butonlara uygulanır) */
.hero-ctas .btn[href="#pricing"],
#openFeedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  min-height: 44px; /* tutarlı yükseklik */
  padding: 0.56rem 1.05rem;
  border-radius: 12px;
  line-height: 1;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .24s ease, background .22s ease;
  will-change: transform, box-shadow;
  color: #ffdede; /* metin rengi (koruyucu) */
}

/* Sheen (parlak kayma) - başlangıç tamamen görünmez / dışarıda */
.hero-ctas .btn[href="#pricing"]::before,
#openFeedback::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -180%;
  width: 60%;
  height: 140%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  opacity: 0;
  pointer-events: none;
}

/* Hafif iç glow overlay */
.hero-ctas .btn[href="#pricing"]::after,
#openFeedback::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 8px 22px rgba(238,52,53,0); /* başlangıçta yok */
  transition: box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
  pointer-events: none;
}

/* Hover / focus durumları: yükselme + glow */
.hero-ctas .btn[href="#pricing"]:hover,
.hero-ctas .btn[href="#pricing"]:focus,
#openFeedback:hover,
#openFeedback:focus {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 28px 80px rgba(238,52,53,0.10);
  outline: none;
}

/* Sheen animasyonu tetikleme: başlangıç daha uzak olduğu için takılma olmaz */
.hero-ctas .btn[href="#pricing"]:hover::before,
.hero-ctas .btn[href="#pricing"]:focus::before,
#openFeedback:hover::before,
#openFeedback:focus::before {
  animation: shineMoveFixed 700ms cubic-bezier(.2,.9,.2,1);
  opacity: 1;
}

/* After (glow) görünürlüğü */
.hero-ctas .btn[href="#pricing"]:hover::after,
.hero-ctas .btn[href="#pricing"]:focus::after,
#openFeedback:hover::after,
#openFeedback:focus::after {
  box-shadow: 0 32px 110px rgba(238,52,53,0.12);
  border-color: rgba(238,52,53,0.08);
}

/* Yeni daha güvenli, takılma yapmayan sheen animasyonu */
@keyframes shineMoveFixed {
  0%   { left: -180%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 180%; opacity: 0; }
}

/* Klavye odak desteği */
.hero-ctas .btn[href="#pricing"]:focus,
#openFeedback:focus {
  box-shadow: 0 30px 88px rgba(238,52,53,0.12);
  outline: none;
}

/* Mobil / dokunmatik: hover yerine tıklamada efekt istersen JS ile tetikleyebilirim. */
/* Reduced motion kullanıcıları için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn[href="#pricing"]::before,
  #openFeedback::before,
  .hero-ctas .btn[href="#pricing"],
  #openFeedback {
    animation: none !important;
    transition: none !important;
  }
}
/* ---------- Footer - extended layout (ADD) ---------- */
.site-footer.footer-extended {
  padding: 48px 0 18px;
  background: linear-gradient(180deg, rgba(8,6,7,0.72), rgba(6,4,5,0.9));
  border-top: 1px solid rgba(255,255,255,0.03);
  color: #dcd0cf;
}

.footer-extended-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 28px;
  align-items: start;
  padding: 12px 0 22px;
}

/* Brand column */
.footer-brand .brand { gap: 12px; align-items:center; }
.footer-brand .brand .logo-small { width:56px; height:56px; }
/* Removed vendor prefixed properties that caused warnings.
   Use plain color for footer brand text to avoid background-clip issues. */
.footer-brand .brand-text {
  font-size:1.25rem;
  letter-spacing:1px;
  color: #ffbcbc;
  background: none;
}
.footer-desc { margin-top:12px; color: #e8dede; line-height:1.55; max-width:420px; }
.footer-legal { margin-top:12px; color:var(--muted); }

/* Links column */
.footer-links ul { list-style:none; padding:0; margin:6px 0 0 0; display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:#ffdede; text-decoration:none; font-weight:700; }
.footer-links a:hover { color:var(--accent-1); transform:translateY(-2px); }

/* Support card (right) */
.support-card {
  display:flex;
  align-items:center;
  gap:12px;
  background: linear-gradient(180deg, rgba(18,12,12,0.6), rgba(12,8,8,0.35));
  border: 1px solid rgba(255,255,255,0.04);
  padding:10px;
  border-radius:12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.sc-avatar { width:70px; height:70px; border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,0.04); background:#111; }
.sc-title { font-weight:900; color:#fff; }
.sc-sub { font-size:0.85rem; color:var(--muted); margin-top:2px; }
.sc-cta .btn { padding:0.5rem 0.8rem; font-weight:800; border-radius:10px; }

/* footer bottom bar */
.footer-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.02); padding-top:14px; margin-top:10px; font-size:0.92rem; color:var(--muted); }
.footer-bottom a { color:var(--accent-1); text-decoration:none; font-weight:800; }

/* small responsive */
@media (max-width:1000px) {
  .footer-extended-inner { grid-template-columns: 1fr; }
  .support-card { justify-content:space-between; }
  .footer-bottom { flex-direction:column; gap:8px; align-items:flex-start; }
}

/* small helper for year display */
#yearSmall { font-weight:700; color:#ffdede; }

/* subtle entrance animation */
.footer-extended { animation: footerFade .6s ease; }
@keyframes footerFade {
  from { transform: translateY(8px); opacity:0; }
  to { transform:none; opacity:1; }
}
/* ---------- Footer: "Atika" için cyan / RGB vurgusu ---------- */
.footer-bottom .designer-name {
  display: inline-block;
  font-weight: 900;
  font-size: 0.98rem;
  /* canlı cyan gradient metin (lint uyumlu) */
  background: linear-gradient(90deg, rgb(0, 230, 230) 0%, rgb(0, 188, 212) 60%, rgb(0, 150, 200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgb(0, 230, 230); /* fallback */
  text-decoration: none;
  line-height: 1;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), text-shadow .22s ease;
  will-change: transform, text-shadow;
  text-shadow: 0 6px 20px rgba(0, 150, 180, 0.10);
}

/* hafif hover animasyonu — dikkat çekici ama abartısız */
.footer-bottom .designer-name:hover,
.footer-bottom .designer-name:focus {
  transform: translateY(-3px) scale(1.02);
  text-shadow: 0 18px 44px rgba(0, 188, 212, 0.18);
  outline: none;
}

/* küçük ekranlarda taşma/okunabilirlik için daha düz renk */
@media (max-width:700px) {
  .footer-bottom .designer-name {
    background: none;
    -webkit-text-fill-color: unset;
    color: rgb(0, 200, 220);
    text-shadow: none;
  }
}

/* erişilebilirlik: reduced motion kullanıcıları için animasyonları devre dışı bırak */
@media (prefers-reduced-motion: reduce) {
  .footer-bottom .designer-name,
  .footer-bottom .designer-name:hover,
  .footer-bottom .designer-name:focus {
    transition: none !important;
    transform: none !important;
    text-shadow: none !important;
  }
}

/* Footer merkezi düzen */
.site-footer.footer-extended {
  text-align: center;
  padding: 3rem 1.4rem 2.4rem;
  background: linear-gradient(180deg, rgba(7,6,6,0.92) 0%, rgba(5,4,4,0.86) 100%);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.footer-center {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.footer-center .brand.footer-brand {
  gap: 10px;
  text-decoration: none;
}

.footer-center .footer-desc {
  margin: 0;
  color: #e9dede;
  font-weight: 700;
}

.footer-center .footer-legal {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  justify-content: center;
  margin: 8px 0 4px;
}

.footer-links a {
  color: #f6eaea;
  font-weight: 800;
  text-decoration: none;
  transition: color .18s ease;
}
.footer-links a:hover { color: var(--accent-1); }

.footer-center .support-card {
  margin-top: 6px;
  width: min(520px, 100%);
  background: linear-gradient(180deg, rgba(16,10,10,0.9), rgba(10,6,6,0.82));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  align-items: center;
}

.footer-note {
  margin: 0;
  color: #dcd2d2;
}

.footer-bottom-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-weight: 700;
}

.footer-bottom-row a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .footer-bottom-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Footer merkezi düzen */
.footer-center .brand.footer-brand {
  gap: 10px;
  text-decoration: none;
  justify-content: center;       /* logo+metni ortala */
}

.footer-center .brand.footer-brand .logo-small {
  display: block;
  margin: 0 auto;                /* logoyu tam ortaya al */
}

.footer-center .support-card {
  margin: 10px auto 0;           /* kutucuğu yatayda ortala */
  width: min(540px, 100%);
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

/* Footer: logo ve destek kartını tam ortala, destek metnini büyüt */
.footer-center .brand.footer-brand {
  justify-content: center;
}

.footer-center .support-card {
  justify-content: center;
  text-align: left;
}

.footer-center .support-card .sc-body {
  font-size: 1rem;         /* alt metin */
  line-height: 1.25;
}

.footer-center .support-card .sc-title {
  font-size: 1.05rem;      /* başlık için hafif büyütme */
}

.footer-center .support-card .sc-cta .btn {
  font-size: 0.98rem;
  padding: 0.55rem 1.15rem;
}

.footer-bottom-row .designer-name {
  display: inline-block;
  font-weight: 900;
  font-size: 0.98rem;
  background: linear-gradient(90deg, rgb(0, 230, 230) 0%, rgb(0, 188, 212) 60%, rgb(0, 150, 200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgb(0, 230, 230);
  text-decoration: none;
  line-height: 1;
  text-shadow: 0 6px 20px rgba(0, 150, 180, 0.10);
  animation: cyanGlow 4.5s ease-in-out infinite;
}

.footer-bottom-row .designer-name:hover,
.footer-bottom-row .designer-name:focus {
  transform: translateY(-2px) scale(1.01);
  text-shadow: 0 14px 36px rgba(0, 188, 212, 0.22);
  outline: none;
}

@keyframes cyanGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(0,200,220,0)); }
  50%  { filter: drop-shadow(0 0 12px rgba(0,200,220,0.35)); }
  100% { filter: drop-shadow(0 0 0 rgba(0,200,220,0)); }
}






/* --- Services: dikey kartlar yan yana (desktop: 3 sütun) --- */
.services-vertical {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 sütun desktop */
  gap: 20px;
  align-items: start;
  margin-top: 1rem;
}

/* Kart düzeni: dikey içerik (başlık -> metin -> CTA) */
.service-card {
  background: linear-gradient(180deg, rgba(12,6,6,0.6), rgba(8,4,4,0.45));
  border: 1px solid rgba(255,255,255,0.04);
  padding: 1.6rem 1.8rem;
  border-radius: 12px;
  min-height: 320px;             /* dikey hissettirir */
  display: flex;
  flex-direction: column;        /* dikey içerik */
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}

/* küçük hover efekti */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 110px rgba(238,52,53,0.08);
}

/* başlık / içerik stilleri */
.service-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
}
.service-card p {
  margin: 0;
  color: #ffdede;
  line-height: 1.6;
  flex: 1; /* metin bloğu büyüyüp CTA'yi alta iter */
}

/* opsiyonel CTA alt hizalama */
.service-card .card-cta {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Responsive: 2 sütun altında 1100px, 1 sütun altında 700px */
@media (max-width:1100px) {
  .services-vertical { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 280px; }
}
@media (max-width:700px) {
  .services-vertical { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
}



/* ribbon / badge */
.pricing-card .ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(90deg, #ff7b6e, #ffb56b);
  box-shadow: 0 8px 30px rgba(255,123,110,0.08);
  z-index: 5;
}
.pricing-card .ribbon.ribbon-right { right: 14px; left: auto; background: linear-gradient(90deg,#f1b64a,#ff8a6b); }

/* popular highlight */
.pricing-card.popular {
  border-color: rgba(255,140,110,0.12);
  box-shadow: 0 38px 120px rgba(255,80,60,0.06);
}
.pricing-card.best {
  border-color: rgba(255,185,90,0.12);
  box-shadow: 0 48px 140px rgba(255,160,80,0.08);
}

/* price head */
.price-head { text-align: left; }
.price-head .plan-title { margin:0 0 .35rem 0; font-size:1.5rem; font-weight:900; }
.pricing-price { font-size:2.6rem; font-weight:900; margin:0; color:#fff; display:flex; align-items:baseline; gap:10px; }
.pricing-price .price-amount { color: var(--accent-1); }
.pricing-price .old-price { font-size:0.9rem; opacity:0.6; margin-left:8px; text-decoration:line-through; color: rgba(255,255,255,0.75); }
.pricing-price .note { display:block; font-size:0.9rem; color:var(--muted); margin-top:6px; font-weight:700; }

/* discount small note */
.discount-note { margin-top:6px; display:inline-block; background: linear-gradient(90deg,#ff9a7f,#ff6a6a); color:#fff; padding:4px 8px; border-radius:8px; font-weight:800; font-size:0.85rem; }


/* cta at bottom */
.pricing-cta { margin-top: auto; display:flex; }
.pricing-cta .btn { width:100%; display:inline-flex; align-items:center; gap:10px; justify-content:center; padding:0.9rem 1rem; font-weight:900; border-radius:12px; }
.pricing-cta .btn svg { opacity:0.95; transform:translateY(0); }

/* hover lift */
.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 60px 160px rgba(238,52,53,0.10); }

/* small visual polish: subtle inner glow */
.pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06));
  mix-blend-mode: overlay;
  opacity: 0.18;
  z-index: 0;
}

/* ---------- Pricing: hover / always-highlight / ribbon tweaks ---------- */
/* ribbon yerleşimi (left / right) */
.pricing-card .ribbon {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(90deg, #ff7b6e, #ffb56b);
  box-shadow: 0 8px 30px rgba(255,123,110,0.08);
  z-index: 5;
}
.pricing-card .ribbon.ribbon-right {
  right: 16px;
  left: auto;
  background: linear-gradient(90deg, #f1b64a, #ff8a6b);
}

/* kart hover etkisi (aylıkta gördüğün efekt) - tüm kartlara uygulanacak */
.pricing-card:hover,
.pricing-card.always-highlight,
.pricing-card.popular {
  transform: translateY(-10px);
  box-shadow: 0 60px 160px rgba(238,52,53,0.14);
  border-color: rgba(255,120,100,0.12);
}

/* küçük ekstra 'streak' görünürlüğü - hover veya default popular/best'te belirginleşsin */
.pricing-card .streak {
  position: absolute;
  left: -30%;
  top: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,120,100,0.06), rgba(255,160,90,0.02));
  transform: skewX(-12deg);
  opacity: 0;
  transition: left .45s cubic-bezier(.2,.9,.2,1), opacity .45s;
}
.pricing-card:hover .streak,
.pricing-card.always-highlight .streak,
.pricing-card.popular .streak,
.pricing-card.best .streak {
  left: -6%;
  opacity: 1;
  transform: skewX(-6deg) translateX(6%);
}



/* Buton hover animasyonları — iletişime geç butonları kart hover efektine benzer */
.pricing-cta .pricing-btn {
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, background .28s;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  color: #fff;
  border: 0;
  box-shadow: 0 18px 44px rgba(238,52,53,0.12);
}
.pricing-cta .pricing-btn:hover,
.pricing-cta .pricing-btn:focus {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 40px 120px rgba(238,52,53,0.14);
  background: linear-gradient(90deg, #ff6b5a, #ff9864);
}

/* Pricing CTA içindeki Discord png ikon */
.pricing-btn .pricing-discord-icon{
  width: 22px;          /* küçüklük burada */
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.25));
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), filter .22s ease;
}

/* Hover'da ikon "oynasın" */
.pricing-btn:hover .pricing-discord-icon{
  transform: translateY(-2px) rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 14px 28px rgba(238,52,53,0.18));
}

/* İstersen daha belirgin bir kısa zıplama animasyonu (opsiyonel) */
.pricing-btn:hover .pricing-discord-icon{
  animation: discordWiggle 650ms ease-in-out;
}
@keyframes discordWiggle{
  0%{ transform: translateY(0) rotate(0) scale(1); }
  40%{ transform: translateY(-3px) rotate(-8deg) scale(1.10); }
  70%{ transform: translateY(-1px) rotate(6deg) scale(1.06); }
  100%{ transform: translateY(-2px) rotate(-6deg) scale(1.08); }
}

/* küçük görsel öge: ribbon ve discount notları mobilde daha küçük */
@media (max-width:700px) {
  .pricing-card .ribbon { font-size:0.78rem; padding:5px 8px; top:12px; }
  .discount-note { font-size:0.8rem; padding:3px 6px; }
}

/* Eğer halihazırda .pricing-card.popular veya .pricing-card.best kuralı varsa,
   onları fazladan vurgulama için yukarıdaki stiller ile birleştirdim. */

/* ---------- Team Members kart hover efekti ---------- */

   .team-card {
  transition: transform 0.25s cubic-bezier(.2,.9,.2,1), box-shadow 0.25s ease;
}

.team-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 70px rgba(0,0,0,0.28);
}
   /* Team card hover büyüme ve yumuşak animasyon */
.team-card {
  transition: transform 260ms cubic-bezier(.2,.9,.2,1), 
              box-shadow 260ms ease, 
              border-color 220ms ease;
  will-change: transform, box-shadow;
}

.team-card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 30px 90px rgba(238,52,53,0.12);
  border-color: rgba(238,52,53,0.14);
}

/* Reduced motion için animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
  .team-card {
    transition: none !important;
    transform: none !important;
  }
  .team-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}