body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; background: #f4f4f4; color: #333; }
        header, section, footer { padding: 20px; text-align: center; }
        header { background: #2258ef; color: white; padding: 10px 20px; transition: 0.3s; }
        section { max-width: 800px; margin: auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        footer { background: #222; color: white; padding: 15px; }
        .btn { display: inline-block; padding: 12px 24px; background: white; color: #000000; text-decoration: none; border-radius: 5px; transition: 0.3s; }
        .btn:hover { background: #04f756; }
        @media (max-width: 768px) {
            section { width: 88%; padding: 15px; }
            
            
        }
        
        
      

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

       

        .subtitle {
            color: #666;
            font-size: 18px;
            margin-bottom: 40px;
        }

        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .faq-item {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-item:hover {
            background: #fafafa;
        }

        .faq-question {
            color: #444;
            font-size: 16px;
            font-weight: 500;
        }

        .chevron {
            color: #666;
        }

        .top-link {
            position: absolute;
            top: 40px;
            right: 40px;
            background: white;
            padding: 12px 24px;
            border-radius: 8px;
            text-decoration: none;
            color: #4CAF50;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .top-link i {
            font-size: 16px;
        }
        
 .faq-wrapper {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 0 15px;
    }

    .faq-container {
      width: 48%;
      max-width: 400px;
      margin: 0;
    }

    @media (max-width: 768px) {
      .faq-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0 10px;
      }
      .faq-container {
        width: 100%;
        padding: 0;
      }
      details {
        margin-bottom: 8px;
      }
    }

    details summary {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 14px 24px;
      background: #2258ef;
      color: #fff;
      font-family: system-ui;
      font-weight: 600;
      user-select: none;
      transition: background 200ms ease;
      border-radius: 4px;
    }

    details summary:hover {
      background: #0056b3;
    }

    details summary::after {
      
      display: inline-block;
      margin-left: 8px;
      height: 24px;
      width: 24px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat center center;
    }

    details .content {
      padding: 10px 16px;
      line-height: 1.8;
      margin-top: -10px;
      text-align: center; /* İçerik ortalanır */
      color: black;
      background: #f1f1f1;
      border-radius: 0 0 4px 4px;
    }
    
    details summary {
  text-align: center; /* Başlık ortalanır */
}

    details {
      background: #edf2f4;
      border-radius: 4px;
      border: 1px solid black; /* Siyah çerçeve */
      padding: 5px; /* İçerik boşluğu */
      overflow: hidden;
      margin-bottom: 10px;
    }

    details summary::-webkit-details-marker {
      display: none;
    }

    details[open] summary {
      background: #0056b3;
      margin-bottom: 10px;
    }