<?php 
declare(strict_types=1);

/**
 * seller/pazarlama.php
 * - Kurumsal tasarım, Nexa font
 * - Mobilde 2'li grid ürün kartları
 * - Optimize edilmiş popup (mobil uyumlu)
 * - Düzenle butonu kaldırıldı
 * ✅ Sidebar çakışma (ana içerik sidebar'a dokunuyor) sorunu düzeltildi: otomatik padding-left offset
 */

$base   = $base ?? (function_exists('app_base') ? app_base('seller/') : '/seller/');
$active = 'pazarlama';

function h($s): string { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
function money_tr(float $n): string { return number_format($n, 2, ',', '.'); }
function dt_tr(string $s): string { $ts = strtotime($s); return $ts ? date('d.m.Y', $ts) : $s; }

/* Sidebar */
include __DIR__ . '/../app/sidebar.php';

/* ✅ DEMO ÜRÜNLER */
$products = [
  ['id'=>201,'title'=>'Vandavil Soyut Tablo','price'=>2450.00,'stock'=>1,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-18','discount'=>15],
  ['id'=>202,'title'=>'Minimal Poster Baskı','price'=>390.00,'stock'=>12,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-17','discount'=>0],
  ['id'=>203,'title'=>'Modern İllüstrasyon','price'=>690.00,'stock'=>7,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-14','discount'=>25],
  ['id'=>204,'title'=>'Seramik Vazo','price'=>1550.00,'stock'=>2,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-12','discount'=>10],
  ['id'=>205,'title'=>'Fine Art Fotoğraf','price'=>980.00,'stock'=>5,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-11','discount'=>0],
  ['id'=>206,'title'=>'Minimalist Saat','price'=>1250.00,'stock'=>8,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-20','discount'=>20],
  ['id'=>207,'title'=>'Lüks Deri Cüzdan','price'=>850.00,'stock'=>15,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-16','discount'=>5],
  ['id'=>208,'title'=>'Akıllı Bileklik','price'=>320.00,'stock'=>22,'img'=>'https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1200&auto=format&fit=crop','status'=>'Aktif','ends'=>'2026-02-19','discount'=>30],
];

$packs = [
  [
    'key'=>'3gun',
    'title'=>'3 Gün',
    'subtitle'=>'Kısa Süreli',
    'price'=>149.00,
    'oldPrice'=>199.00,
    'features'=>['Arama sonuçlarında öne çıkar', 'Kategori vitrininde görünür', 'Kısa süreli görünürlük artışı'],
    'popular'=>false,
    'icon'=>'zap'
  ],
  [
    'key'=>'1hafta',
    'title'=>'1 Hafta',
    'subtitle'=>'En Popüler',
    'price'=>299.00,
    'oldPrice'=>399.00,
    'features'=>['Daha güçlü vitrin görünürlüğü', 'Daha yüksek tıklanma oranı', '7 gün boyunca öne çıkar', 'Ana sayfa önerilerinde yer al'],
    'popular'=>true,
    'icon'=>'crown'
  ],
  [
    'key'=>'1ay',
    'title'=>'1 Ay',
    'subtitle'=>'Uzun Vadeli',
    'price'=>799.00,
    'oldPrice'=>999.00,
    'features'=>['Maksimum görünürlük', 'Uzun süreli vitrin avantajı', '30 gün boyunca öne çıkar', 'Ana sayfa önerilerinde öncelikli'],
    'popular'=>false,
    'icon'=>'trophy'
  ],
];

$flash = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $pid = (int)($_POST['product_id'] ?? 0);
  $packKey = (string)($_POST['pack'] ?? '');
  if ($pid && $packKey) $flash = '✅ Öne çıkarma talebi başarıyla alındı!';
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <title>Pazarlama • Öne Çıkarma</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover" />
  
  <!-- Nexa Fontları -->
  <style>
    @font-face {
      font-family: 'Nexa';
      src: url('/public/assets/fonts/Nexa-ExtraLight.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'Nexa';
      src: url('/public/assets/fonts/Nexa-Heavy.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'Nexa';
      src: url('/public/assets/fonts/Nexa-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'Nexa';
      src: url('/public/assets/fonts/Nexa-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'Nexa';
      src: url('/public/assets/fonts/Nexa-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
  </style>
  
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    /* Tema Değişkenleri - Kurumsal Siyah */
    :root {
      --primary: #4f4e4e;
      --primary-light: #2D2D2D;
      --secondary: #111111;
      --accent: #222222;
      --dark: #4f4e4e;
      --light: #F9FAFB;
      --lighter: #FFFFFF;
      --card: #FFFFFF;
      --text: #1A1A1A;
      --text-light: #666666;
      --text-lighter: #999999;
      --border: #E5E7EB;
      --border-light: #F3F4F6;
      --success: #10B981;
      --warning: #F59E0B;
      --danger: #EF4444;
      
      --gradient-primary: linear-gradient(135deg, #4f4e4e 0%, #2D2D2D 100%);
      --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FCFCFC 100%);
      --gradient-hover: linear-gradient(135deg, #111111 0%, #2D2D2D 100%);
      
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
      --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.15);
      
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 18px;
      --radius-full: 9999px;
      
      --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

      /* ✅ Sidebar Offset Fallback (JS ölçüp güncelleyecek) */
      --sidebar-offset: 0px;
    }
    
    /* Reset */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html, body {
      height: 100%;
      width: 100%;
      overflow-x: hidden;
      background: var(--light);
      color: var(--text);
      font-family: 'Nexa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 400;
      line-height: 1.5;
    }
    
    /* Main Container */
    .main-container {
      width: 100%;
      min-height: 100vh;
      /* ✅ Sidebar çakışmasını çözer (tasarıma dokunmadan boşluk bırakır) */
      padding-left: var(--sidebar-offset);
      transition: padding-left 0.2s ease;
    }

    /* Desktop fallback (sidebar fixed ise ilk anda çakışmayı engeller, JS sonra net ölçer) */
    @media (min-width: 1024px) {
      :root { --sidebar-offset: 380px; }
    }
    @media (max-width: 1023px) {
      :root { --sidebar-offset: 0px; }
    }
    
    /* Page Header - Kurumsal */
    .page-header {
      padding: 1.5rem 1.25rem;
      background: var(--card);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .page-title {
      font-size: 1.75rem;
      font-weight: 900;
      color: var(--dark);
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 0.375rem;
    }
    
    .page-subtitle {
      color: var(--text-light);
      font-weight: 300;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    /* Stats Container */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
      margin-top: 1.25rem;
    }
    
    @media (max-width: 640px) {
      .stats-container {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }
    }
    
    .stat-card {
      background: var(--lighter);
      border-radius: var(--radius-lg);
      padding: 1rem;
      border: 1px solid var(--border);
      transition: var(--transition);
    }
    
    .stat-card:hover {
      border-color: var(--border-light);
      box-shadow: var(--shadow-md);
    }
    
    .stat-value {
      font-size: 1.75rem;
      font-weight: 900;
      color: var(--dark);
      line-height: 1;
      margin-bottom: 0.25rem;
    }
    
    .stat-label {
      font-size: 0.8125rem;
      color: var(--text-light);
      font-weight: 400;
    }
    
    /* Success Message */
    .success-message {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-radius: var(--radius-md);
      padding: 1rem 1.25rem;
      margin: 0 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      animation: slideIn 0.5s ease;
    }
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .success-message i {
      color: var(--success);
      font-size: 1.25rem;
    }
    
    .success-text {
      font-weight: 500;
      color: var(--text);
      font-size: 0.9375rem;
    }
    
    /* Products Section */
    .products-section {
      padding: 1.5rem 1.25rem;
    }
    
    .section-title {
      font-size: 1.25rem;
      font-weight: 900;
      color: var(--dark);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    /* Products Grid - MOBİL: 2'li grid */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      width: 100%;
    }
    
    /* Tablet */
    @media (min-width: 768px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
    }
    
    /* Desktop */
    @media (min-width: 1024px) {
      .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
      }
    }
    
    /* Large Desktop */
    @media (min-width: 1280px) {
      .products-grid {
        grid-template-columns: repeat(5, 1fr);
      }
    }
    
    /* Product Card - Kurumsal */
    .product-card {
      background: var(--card);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      border: 1px solid var(--border);
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      border-color: var(--border-light);
    }
    
    /* Badges */
    .product-badge {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      z-index: 10;
      background: var(--gradient-primary);
      color: white;
      font-size: 0.6875rem;
      font-weight: 900;
      padding: 0.25rem 0.5rem;
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-md);
    }
    
    .product-badge.discount {
      background: linear-gradient(135deg, #4f4e4e 0%, #222222 100%);
    }
    
    .product-badge.limited {
      background: linear-gradient(135deg, #111111 0%, #333333 100%);
    }
    
    /* Product Image */
    .product-image-container {
      position: relative;
      padding-top: 75%;
      overflow: hidden;
      background: #F8F9FA;
    }
    
    .product-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .product-card:hover .product-image {
      transform: scale(1.03);
    }
    
    /* Product Content */
    .product-content {
      padding: 1rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .product-title {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.5em;
    }
    
    /* Price Container */
    .product-price-container {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      margin: 0.25rem 0;
      flex-wrap: wrap;
    }
    
    .current-price {
      font-size: 1.125rem;
      font-weight: 900;
      color: var(--dark);
      line-height: 1;
    }
    
    .old-price {
      font-size: 0.8125rem;
      color: var(--text-light);
      text-decoration: line-through;
      font-weight: 400;
    }
    
    .discount-percent {
      background: rgba(0, 0, 0, 0.08);
      color: var(--dark);
      font-size: 0.75rem;
      font-weight: 900;
      padding: 0.125rem 0.375rem;
      border-radius: var(--radius-full);
    }
    
    /* Product Meta */
    .product-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      margin-top: auto;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border);
    }
    
    .meta-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .meta-value {
      font-weight: 900;
      font-size: 0.875rem;
      color: var(--dark);
      line-height: 1;
    }
    
    .meta-label {
      font-size: 0.6875rem;
      color: var(--text-light);
      font-weight: 300;
      margin-top: 0.125rem;
    }
    
    /* Feature Button - Tek buton */
    .feature-btn-container {
      margin-top: 0.75rem;
    }
    
    .feature-btn {
      width: 100%;
      height: 2.5rem;
      border-radius: var(--radius-md);
      background: var(--gradient-primary);
      color: white;
      border: none;
      font-weight: 700;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
    }
    
    .feature-btn:hover {
      background: var(--gradient-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
    
    .feature-btn i {
      font-size: 1rem;
    }
    
    /* Modal Overlay */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      z-index: 9999;
      animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .modal-overlay.show {
      display: flex;
    }
    
    /* Modal Content - Mobile Optimized */
    .modal-content {
      width: 100%;
      max-width: 480px;
      background: var(--card);
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
      animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
      max-height: 90vh;
      overflow-y: auto;
      border: 1px solid var(--border);
    }
    
    @media (min-width: 768px) {
      .modal-content {
        max-width: 640px;
      }
    }
    
    @keyframes slideUp {
      from { 
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }
      to { 
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    /* Modal Header */
    .modal-header {
      padding: 1.25rem;
      background: var(--gradient-primary);
      color: white;
      position: relative;
    }
    
    .modal-title {
      font-size: 1.25rem;
      font-weight: 900;
      margin-bottom: 0.25rem;
    }
    
    .modal-subtitle {
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 300;
    }
    
    .close-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }
    
    .close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    
    /* Modal Body - Mobile Optimized */
    .modal-body {
      padding: 1.25rem;
    }
    
    /* Packages Grid - Mobile: 1 column, Desktop: 3 columns */
    .packages-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    
    @media (min-width: 640px) {
      .packages-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    
    /* Package Card - Optimized for Mobile */
    .package-card {
      background: var(--lighter);
      border: 2px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.25rem;
      transition: var(--transition);
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    .package-card:hover {
      border-color: var(--primary-light);
      box-shadow: var(--shadow-md);
    }
    
    .package-card.selected {
      border-color: var(--primary);
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.05));
      box-shadow: var(--shadow-lg);
    }
    
    .package-card.popular {
      border-color: var(--primary);
    }
    
    .popular-badge {
      position: absolute;
      top: -0.75rem;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-primary);
      color: white;
      font-size: 0.75rem;
      font-weight: 900;
      padding: 0.25rem 1rem;
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-md);
      white-space: nowrap;
    }
    
    .package-header {
      text-align: center;
    }
    
    .package-icon {
      width: 3rem;
      height: 3rem;
      margin: 0 auto 0.75rem;
      border-radius: var(--radius-full);
      background: var(--gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.25rem;
    }
    
    .package-title {
      font-size: 1.125rem;
      font-weight: 900;
      color: var(--dark);
      margin-bottom: 0.25rem;
    }
    
    .package-subtitle {
      font-size: 0.8125rem;
      color: var(--text-light);
      font-weight: 300;
      margin-bottom: 0.75rem;
    }
    
    .package-price-container {
      text-align: center;
      margin-bottom: 1rem;
    }
    
    .package-price {
      font-size: 1.75rem;
      font-weight: 900;
      color: var(--dark);
      line-height: 1;
    }
    
    .package-old-price {
      font-size: 0.9375rem;
      color: var(--text-light);
      text-decoration: line-through;
      font-weight: 400;
      margin-bottom: 0.25rem;
    }
    
    .package-save {
      display: inline-block;
      font-size: 0.8125rem;
      font-weight: 900;
      color: var(--success);
      background: rgba(16, 185, 129, 0.1);
      padding: 0.125rem 0.5rem;
      border-radius: var(--radius-full);
    }
    
    .package-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .package-features li {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--text);
      line-height: 1.4;
    }
    
    .package-features li i {
      color: var(--success);
      font-size: 0.875rem;
      margin-top: 0.125rem;
      flex-shrink: 0;
    }
    
    /* Modal Footer */
    .modal-footer {
      padding: 1.25rem;
      border-top: 1px solid var(--border);
      background: var(--lighter);
    }
    
    .selected-package-info {
      text-align: center;
      margin-bottom: 1rem;
    }
    
    .selected-label {
      font-size: 0.875rem;
      color: var(--text-light);
      font-weight: 400;
      margin-bottom: 0.25rem;
    }
    
    .selected-package {
      font-size: 1.125rem;
      font-weight: 900;
      color: var(--dark);
    }
    
    .modal-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    
    @media (min-width: 640px) {
      .modal-actions {
        flex-direction: row;
      }
    }
    
    .modal-btn {
      flex: 1;
      height: 3rem;
      border-radius: var(--radius-md);
      font-weight: 700;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: var(--transition);
      border: none;
    }
    
    .modal-btn-secondary {
      background: var(--lighter);
      color: var(--text);
      border: 1px solid var(--border);
    }
    
    .modal-btn-secondary:hover {
      background: var(--border-light);
      border-color: var(--border);
    }
    
    .modal-btn-primary {
      background: var(--gradient-primary);
      color: white;
      box-shadow: var(--shadow-sm);
    }
    
    .modal-btn-primary:hover {
      background: var(--gradient-hover);
      box-shadow: var(--shadow-md);
    }
    
    .modal-btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }
    
    /* Responsive Improvements */
    @media (max-width: 480px) {
      .page-header { padding: 1.25rem 1rem; }
      .products-section { padding: 1.25rem 1rem; }
      .product-content { padding: 0.875rem; }
      .product-title { font-size: 0.8125rem; }
      .current-price { font-size: 1rem; }
      .modal-header { padding: 1rem; }
      .modal-body { padding: 1rem; }
      .modal-footer { padding: 1rem; }
      .package-card { padding: 1rem; }
      .package-price { font-size: 1.5rem; }
    }
    
    /* Very Small Screens */
    @media (max-width: 360px) {
      .products-grid { grid-template-columns: 1fr; }
      .product-meta { grid-template-columns: repeat(2, 1fr); }
    }
    
    /* Touch Device Optimizations */
    @media (hover: none) {
      .product-card:hover { transform: none; }
      .feature-btn:hover { transform: none; }
      .package-card:hover { transform: none; }
      .modal-btn:hover { transform: none; }
    }
  </style>
</head>

<body>
  <main class="main-container" id="mainContainer">
    <!-- Page Header -->
    <header class="page-header">
      <div>
        <h1 class="page-title">Öne Çıkarma</h1>
        <div class="page-subtitle">
          <i class="fas fa-chart-line"></i>
          <span>Ürün görünürlüğünüzü artırın</span>
        </div>
      </div>
      
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-value"><?= count($products) ?></div>
          <div class="stat-label">Toplam Ürün</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">5</div>
          <div class="stat-label">Öne Çıkan</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">+%24</div>
          <div class="stat-label">Ort. Artış</div>
        </div>
      </div>
    </header>
    
    <!-- Success Message -->
    <?php if ($flash): ?>
    <div class="success-message">
      <i class="fas fa-check-circle"></i>
      <div class="success-text"><?= h($flash) ?></div>
    </div>
    <?php endif; ?>
    
    <!-- Products Section -->
    <section class="products-section">
      <h2 class="section-title">
        <i class="fas fa-box"></i>
        Ürünleriniz
      </h2>
      
      <div class="products-grid">
        <?php foreach ($products as $p): ?>
        <div class="product-card">
          <!-- Badges -->
          <?php if ($p['discount'] > 0): ?>
          <div class="product-badge discount">-%<?= $p['discount'] ?></div>
          <?php elseif ($p['stock'] <= 3): ?>
          <div class="product-badge limited">Son <?= $p['stock'] ?></div>
          <?php endif; ?>
          
          <!-- Product Image -->
          <div class="product-image-container">
            <img class="product-image" src="<?= h($p['img']) ?>" alt="<?= h($p['title']) ?>" loading="lazy">
          </div>
          
          <!-- Product Content -->
          <div class="product-content">
            <h3 class="product-title"><?= h($p['title']) ?></h3>
            
            <div class="product-price-container">
              <?php
                $discountedPrice = $p['price'];
                if ($p['discount'] > 0) {
                  $discountedPrice = $p['price'] * (1 - $p['discount'] / 100);
                }
              ?>
              <span class="current-price"><?= h(money_tr($discountedPrice)) ?> ₺</span>
              
              <?php if ($p['discount'] > 0): ?>
              <span class="old-price"><?= h(money_tr($p['price'])) ?> ₺</span>
              <span class="discount-percent">%<?= $p['discount'] ?></span>
              <?php endif; ?>
            </div>
            
            <div class="product-meta">
              <div class="meta-item">
                <span class="meta-value">#<?= $p['id'] ?></span>
                <span class="meta-label">ID</span>
              </div>
              <div class="meta-item">
                <span class="meta-value"><?= $p['stock'] ?></span>
                <span class="meta-label">Stok</span>
              </div>
              <div class="meta-item">
                <span class="meta-value"><?= h(dt_tr($p['ends'])) ?></span>
                <span class="meta-label">Bitiş</span>
              </div>
            </div>
            
            <!-- Öne Çıkar Butonu -->
            <div class="feature-btn-container">
              <button class="feature-btn" type="button" 
                      onclick="openFeatureModal(<?= $p['id'] ?>, '<?= h(addslashes($p['title'])) ?>')">
                <i class="fas fa-arrow-trend-up"></i>
                Öne Çıkar
              </button>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </section>
  </main>
  
  <!-- Feature Modal - Mobile Optimized -->
  <div class="modal-overlay" id="featureModal" onclick="closeModalOnOverlay(event)">
    <div class="modal-content" id="modalContent">
      <div class="modal-header">
        <div>
          <h2 class="modal-title">Öne Çıkarma Paketi</h2>
          <div class="modal-subtitle" id="modalProductInfo">Ürün seçildi</div>
        </div>
        <button class="close-btn" type="button" onclick="closeFeatureModal()" aria-label="Kapat">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="modal-body">
        <div class="packages-grid" id="packagesGrid">
          <?php foreach ($packs as $pk): ?>
          <div class="package-card <?= $pk['popular'] ? 'popular' : '' ?>" 
               data-pack="<?= h($pk['key']) ?>"
               onclick="selectPackage(this)"
               role="button"
               tabindex="0">
               
            <?php if ($pk['popular']): ?>
            <div class="popular-badge">POPÜLER</div>
            <?php endif; ?>
            
            <div class="package-header">
              <div class="package-icon">
                <i class="fas fa-<?= $pk['icon'] ?>"></i>
              </div>
              <h3 class="package-title"><?= h($pk['title']) ?></h3>
              <div class="package-subtitle"><?= h($pk['subtitle']) ?></div>
            </div>
            
            <div class="package-price-container">
              <?php if ($pk['oldPrice'] > $pk['price']): ?>
              <div class="package-old-price"><?= h(money_tr($pk['oldPrice'])) ?> ₺</div>
              <?php endif; ?>
              <div class="package-price"><?= h(money_tr($pk['price'])) ?> ₺</div>
              <?php if ($pk['oldPrice'] > $pk['price']): 
                $savePercent = round(($pk['oldPrice'] - $pk['price']) / $pk['oldPrice'] * 100);
              ?>
              <div class="package-save">%<?= $savePercent ?> tasarruf</div>
              <?php endif; ?>
            </div>
            
            <ul class="package-features">
              <?php foreach ($pk['features'] as $ft): ?>
              <li><i class="fas fa-check"></i> <?= h($ft) ?></li>
              <?php endforeach; ?>
            </ul>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      
      <div class="modal-footer">
        <div class="selected-package-info">
          <div class="selected-label">Seçilen Paket</div>
          <div class="selected-package" id="selectedPackageName">Paket seçilmedi</div>
        </div>
        
        <div class="modal-actions">
          <button class="modal-btn modal-btn-secondary" type="button" onclick="closeFeatureModal()">
            <i class="fas fa-times"></i>
            Vazgeç
          </button>
          
          <form method="post" onsubmit="return confirmFeatureSubmit()">
            <input type="hidden" name="product_id" id="productIdInput" value="">
            <input type="hidden" name="pack" id="packInput" value="">
            <button class="modal-btn modal-btn-primary" type="submit" id="confirmBtn" disabled>
              <i class=""></i>
              Öne Çıkar
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // ✅ Sidebar offset fix (tasarıma dokunmadan çakışmayı engeller)
    (function () {
      const main = document.getElementById('mainContainer');

      function pickSidebarEl() {
        // olası selector'lar (sidebar.php yapısına göre en az birini yakalar)
        return (
          document.querySelector('[data-sidebar]') ||
          document.querySelector('.sidebar') ||
          document.querySelector('.seller-sidebar') ||
          document.getElementById('sidebar') ||
          document.querySelector('aside') ||
          document.querySelector('nav')
        );
      }

      let t = null;
      function applySidebarOffset() {
        if (!main) return;

        // mobilde içerik tam genişlik
        if (window.matchMedia('(max-width: 1023px)').matches) {
          main.style.paddingLeft = '0px';
          return;
        }

        const sb = pickSidebarEl();
        if (!sb) return;

        const sbRect = sb.getBoundingClientRect();
        // reset ölçümü doğru almak için
        main.style.paddingLeft = '0px';
        const mainRect = main.getBoundingClientRect();

        // Sidebar gerçekten içerikle çakışıyorsa offset uygula
        const overlaps = sbRect.right > (mainRect.left + 4);
        if (!overlaps) {
          main.style.paddingLeft = '0px';
          return;
        }

        const w = Math.round(sbRect.width || 0);
        if (w > 120 && w < 720) {
          main.style.paddingLeft = (w + 16) + 'px'; // 16px nefes payı
        }
      }

      window.addEventListener('load', applySidebarOffset, { passive: true });
      window.addEventListener('resize', function () {
        clearTimeout(t);
        t = setTimeout(applySidebarOffset, 80);
      }, { passive: true });

      // DOM biraz geç render oluyorsa (sidebar include), kısa bir retry
      document.addEventListener('DOMContentLoaded', function () {
        applySidebarOffset();
        setTimeout(applySidebarOffset, 150);
        setTimeout(applySidebarOffset, 350);
      });
    })();

    // DOM Elements
    const featureModal = document.getElementById('featureModal');
    const modalProductInfo = document.getElementById('modalProductInfo');
    const productIdInput = document.getElementById('productIdInput');
    const packInput = document.getElementById('packInput');
    const confirmBtn = document.getElementById('confirmBtn');
    const selectedPackageName = document.getElementById('selectedPackageName');
    const modalContent = document.getElementById('modalContent'); // (küçük fix: closeFeatureModal için)
    
    let selectedPackage = null;
    
    // Open modal
    function openFeatureModal(productId, productTitle) {
      // Reset selection
      selectedPackage = null;
      packInput.value = '';
      confirmBtn.disabled = true;
      selectedPackageName.textContent = 'Paket seçilmedi';
      
      // Remove selected class
      document.querySelectorAll('.package-card').forEach(card => {
        card.classList.remove('selected');
      });
      
      // Set product info
      productIdInput.value = productId;
      modalProductInfo.textContent = `Ürün: ${productTitle} (ID: ${productId})`;
      
      // Show modal
      featureModal.classList.add('show');
      document.body.style.overflow = 'hidden';
      
      // Add animation
      modalContent.style.animation = 'slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1)';
    }
    
    // Close modal
    function closeFeatureModal() {
      featureModal.classList.remove('show');
      document.body.style.overflow = '';
      modalContent.style.animation = '';
    }
    
    // Close modal on overlay click
    function closeModalOnOverlay(event) {
      if (event.target === featureModal) {
        closeFeatureModal();
      }
    }
    
    // Select package
    function selectPackage(element) {
      // Remove selected class from all
      document.querySelectorAll('.package-card').forEach(card => {
        card.classList.remove('selected');
      });
      
      // Add to clicked
      element.classList.add('selected');
      selectedPackage = element;
      
      // Get data
      const packKey = element.getAttribute('data-pack');
      const packTitle = element.querySelector('.package-title').textContent;
      const packPrice = element.querySelector('.package-price').textContent;
      
      // Update form
      packInput.value = packKey;
      selectedPackageName.textContent = `${packTitle} • ${packPrice}`;
      confirmBtn.disabled = false;
      
      // Add click animation for mobile
      if (window.matchMedia('(hover: none)').matches) {
        element.style.transform = 'scale(0.98)';
        setTimeout(() => {
          element.style.transform = '';
        }, 200);
      }
    }
    
    // Confirm submission
    function confirmFeatureSubmit() {
      if (!packInput.value) {
        alert('Lütfen bir paket seçin.');
        return false;
      }
      
      const productId = productIdInput.value;
      const packTitle = selectedPackageName.textContent;
      
      return confirm(`${productId} numaralı ürün için "${packTitle}" paketi ile öne çıkarma işlemini başlatmak istiyor musunuz?`);
    }
    
    // Keyboard support
    document.addEventListener('keydown', function(event) {
      // ESC to close
      if (event.key === 'Escape' && featureModal.classList.contains('show')) {
        closeFeatureModal();
      }
      
      // Arrow navigation in modal
      if (!featureModal.classList.contains('show')) return;
      
      const packages = Array.from(document.querySelectorAll('.package-card'));
      const currentIndex = packages.indexOf(selectedPackage);
      
      switch(event.key) {
        case 'ArrowRight':
        case 'ArrowDown':
          event.preventDefault();
          const nextIndex = (currentIndex + 1) % packages.length;
          selectPackage(packages[nextIndex]);
          packages[nextIndex].focus();
          break;
          
        case 'ArrowLeft':
        case 'ArrowUp':
          event.preventDefault();
          const prevIndex = (currentIndex - 1 + packages.length) % packages.length;
          selectPackage(packages[prevIndex]);
          packages[prevIndex].focus();
          break;
          
        case 'Enter':
          if (selectedPackage && document.activeElement === selectedPackage) {
            confirmFeatureSubmit();
          }
          break;
      }
    });
    
    // Touch device optimizations
    document.addEventListener('DOMContentLoaded', function() {
      const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
      
      if (isTouchDevice) {
        // Add touch feedback to cards
        document.querySelectorAll('.product-card').forEach(card => {
          card.addEventListener('touchstart', function() {
            this.style.opacity = '0.9';
          });
          
          card.addEventListener('touchend', function() {
            this.style.opacity = '';
          });
        });
        
        // Add touch feedback to buttons
        document.querySelectorAll('.feature-btn, .modal-btn').forEach(btn => {
          btn.addEventListener('touchstart', function() {
            this.style.transform = 'scale(0.98)';
          });
          
          btn.addEventListener('touchend', function() {
            this.style.transform = '';
          });
        });
      }
    });
    
    // Prevent scroll when modal is open on mobile
    let touchStartY = 0;
    
    featureModal.addEventListener('touchstart', function(e) {
      touchStartY = e.touches[0].clientY;
    }, { passive: true });
    
    featureModal.addEventListener('touchmove', function(e) {
      const modalContent = document.getElementById('modalContent');
      const isAtTop = modalContent.scrollTop === 0;
      const isAtBottom = modalContent.scrollHeight - modalContent.scrollTop === modalContent.clientHeight;
      const isScrollingModal = modalContent.scrollHeight > modalContent.clientHeight;
      
      if (!isScrollingModal || (isAtTop && e.touches[0].clientY > touchStartY) || 
          (isAtBottom && e.touches[0].clientY < touchStartY)) {
        e.preventDefault();
      }
    }, { passive: false });
  </script>
</body>
</html>
