/* ================================
   OrtApp - Global Style Guide
   Cleaned — duplicates removed
   ================================ */

/* --- Renk Değişkenleri --- */
:root {
  --primary: #ff311d;
  --primary-dark: #ff311d;
  --secondary: #f3f4f6;
  --bg-light: #f9fafb;
  --text-dark: #111827;
  --text-gray: #6b7280;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --transition: all 0.25s ease;
  --font-main: 'Urbanist', sans-serif;
}

/* --- Genel Ayarlar --- */
* { box-sizing: border-box; }
body {
  font-family: var(--font-main) !important;
  margin: 0;
  background-color: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

p {
  color: var(--text-gray);
}

/* --- Navbar --- */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: black; /* koyu lacivert / mavi ton */
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Navbar buton stili (tek ve birleşik) */
.nav-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-buttons button {
  color: white;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
}
.nav-buttons button:hover {
  background-color: rgba(255,255,255,0.15);
}

/* Özel buton varyantları */
.nav-buttons .primary {
  background-color: var(--primary);
  color: white;
  border: none;
}
.nav-buttons .primary:hover {
  background-color: var(--primary-dark);
}
.nav-buttons .logout {
  background-color: var(--primary);
  color: white;
}
.nav-buttons .logout:hover {
  background-color: var(--primary-dark);
}

/* --- Hero Bölümü --- */
.hero {
  background: white;
  padding: 5rem 1.5rem;
  text-align: center;
}

.hero-text {
  max-width: 700px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1rem;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-buttons button {
  font-size: 15px;
  padding: 12px 20px;
  border-radius: var(--radius);
}

button.primary {
  font-family: var(--font-main) !important;
  background-color: var(--primary);
  color: white;
}
button.primary:hover {
  background-color: var(--primary-dark);
}

/* --- Özellikler (Features) --- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 3rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.feature {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  text-align: center;
  transition: var(--transition);
}
.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.feature h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.feature p {
  font-size: 0.95rem;
}

/* --- Global utility card class (kullanılan kart stili) --- */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 1rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: var(--transition);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

/* --- Responsive Ayarlar --- */
@media (max-width: 640px) {
  .hero { padding: 2rem 1rem; }
  .hero h1 { font-size: 1.6rem; }
  .features { padding: 2rem 1rem; }
  nav { flex-direction: column; gap: 0.5rem; align-items: stretch; }
  .nav-buttons { justify-content: center; flex-wrap: wrap; }
}

/* ================================
   Register Sayfası Özel Stilleri
   ================================ */

.register-container {
  max-width: 420px;
  margin: 3rem auto;
  background: white;
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.register-container h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary);
}
.register-container form { display: flex; flex-direction: column; }
.register-container label {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  font-size: 14px;
}
.register-container input {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid #d1d5db;
  font-size: 14px;
  width: 100%;
}
.register-container input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.register-container button {
  margin-top: 1.5rem;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  background-color: var(--primary);
  color: white;
  font-size: 15px;
  transition: var(--transition);
}
.register-container button:hover { background-color: var(--primary-dark); }

/* Rol Seçimi Kutuları */
.role-select { display: flex; justify-content: space-between; margin-bottom: 1.5rem; margin-top: 0.5rem; }
.role-option {
  flex: 1;
  text-align: center;
  border: 1px solid #d1d5db;
  padding: 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  margin: 0 5px;
  color: var(--text-dark);
  background: var(--secondary);
  transition: var(--transition);
}
.role-option:hover { background-color: #e5e7eb; }
.role-option.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Footer ve link kısmı */
.register-footer { text-align: center; font-size: 14px; margin-top: 1.2rem; }
.register-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.register-footer a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .register-container { margin: 2rem 1rem; padding: 1.5rem 1rem; }
  .role-select { flex-direction: column; }
  .role-option { margin: 5px 0; }
}

/* ================================
   Login Sayfası Özel Stilleri
   ================================ */

.login-container {
  max-width: 400px;
  margin: 3rem auto;
  background: white;
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.login-container h2 { text-align: center; margin-bottom: 1.5rem; color: var(--primary); }
.login-container form { display: flex; flex-direction: column; }
.login-container label { font-weight: 600; margin-top: 1rem; margin-bottom: 0.4rem; font-size: 14px; }
.login-container input {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid #d1d5db;
  font-size: 14px;
}
.login-container input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.login-container button {
  margin-top: 1.5rem;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  background-color: var(--primary);
  color: white;
  font-size: 15px;
  transition: var(--transition);
}
.login-container button:hover { background-color: var(--primary-dark); }
.login-footer { text-align: center; font-size: 14px; margin-top: 1.2rem; }
.login-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.login-footer a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .login-container { margin: 2rem 1rem; padding: 1.5rem 1rem; }
}

/* ================================
   Dashboard & Influencer Panel
   ================================ */

.dashboard {
  max-width: 1000px;
  padding: 0 1.5rem;
}
.welcome { text-align: center; margin-bottom: 2rem; }
.welcome h2 { font-size: 1.8rem; color: var(--primary); margin-bottom: 0.5rem; }
.welcome p { font-size: 1rem; color: var(--text-gray); }

/* İstatistik Kartları (stats ortak kullanım) */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.stats .card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}
.stats .card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.stats .card h3 { font-size: 1.1rem; color: var(--text-dark); margin-bottom: 0.5rem; }
.stats .card p { font-size: 1.2rem; font-weight: 600; color: var(--primary); }

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .welcome h2 { font-size: 1.5rem; }
}

/* Kampanya kartları (liste görünümü) */
.campaigns { margin-bottom: 2rem; }
.campaigns h3 { font-size: 1.3rem; color: var(--primary); margin-bottom: 1rem; }
.campaign {
  background: white;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.campaign:hover { transform: translateY(-3px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.campaign h4 { font-size: 1rem; margin-bottom: 0.3rem; }
.campaign p { font-size: 0.9rem; color: var(--text-gray); }
.campaign button {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}
.campaign button:hover { background-color: var(--primary-dark); }

/* Katıldığım kampanyalar liste stili (benzer kampanya) */
.campaign-list { display: flex; flex-direction: column; gap: 1rem; }
.page-title { font-size: 1.5rem; color: var(--primary); font-weight: 600; margin-bottom: 2rem; text-align: center; }

/* Durum etiketi */
.status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  text-align: center;
  width: fit-content;
}
.status.active { background-color: #d1fae5; color: #065f46; }
.status.completed { background-color: #fef3c7; color: #92400e; }

/* Logout butonu */
.logout-btn {
  display: block;
  margin: 2rem auto;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: var(--transition);
}
.logout-btn:hover { background-color: var(--primary-dark); }

@media (max-width: 640px) {
  .campaign { flex-direction: column; align-items: flex-start; }
  .campaign button { align-self: flex-end; margin-top: 0.5rem; }
}

/* ================================
   Kazançlarım Sayfası
   ================================ */

.earnings-container { max-width: 900px; margin: 3rem auto; padding: 0 1.5rem; }
.chart-box { background: white; padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 2rem; }

/* Tablo stili */
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}
thead { background-color: var(--secondary); }
thead th { padding: 12px; text-align: left; color: var(--text-dark); }
tbody td { padding: 10px 12px; border-top: 1px solid #e5e7eb; color: var(--text-gray); }

@media (max-width: 640px) {
  .chart-box { padding: 1rem; }
  table, thead, tbody, th, td, tr { display: block; width: 100%; }
  thead { display: none; }
}

/* ================================
   Profil Sayfası - Modern Stil
   ================================ */

.profile-container { max-width: 800px; margin: 3rem auto; padding: 2rem; }
.profile-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.profile-header { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.profile-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); }
.profile-name { font-size: 1.8rem; color: var(--primary); font-weight: 700; }
.profile-email { font-size: 1rem; color: var(--text-gray); }
.profile-details { display: flex; flex-direction: column; gap: 1.5rem; }
.profile-section h3 { font-size: 1.2rem; color: var(--primary); margin-bottom: 0.5rem; }
.profile-section p, .social-list li { font-size: 0.95rem; color: var(--text-gray); }
.social-list { list-style: none; padding-left: 0; }

/* Actions */
.actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.edit-btn, .delete-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.edit-btn { background-color: var(--primary); color: white; }
.edit-btn:hover { background-color: var(--primary-dark); }
.delete-btn { background-color: #ef4444; color: white; }
.delete-btn:hover { background-color: #b91c1c; }

@media (max-width: 640px) {
  .profile-container { margin: 2rem 1rem; padding: 1.5rem; }
  .actions { flex-direction: column; }
  .edit-btn, .delete-btn { flex: 1 1 100%; }
}

/* --- OrtApp Logo Stili (tek .logo-img tanımı) --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.logo-img {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 0.3s ease, filter 0.18s ease;
  filter: brightness(0) invert(1);
}
.logo:hover .logo-img { transform: translateY(-3px); }
@media (max-width: 768px) { .logo-img { height: 36px; } }