<div class="bl-accordion-container">
  <details name="sss">
    <summary>
      <span class="bl-accordion-title">
        <bl-icon name="info" style="font-size: var(--bl-font-size-l)"></bl-icon>
        Trendyol Go iş ortakları nasıl faaliyet gösterirler?
      </span>
      <bl-icon name="arrow_down"></bl-icon>
    </summary>
    <div class="bl-accordion-content">
      Trendyol Go ile imzaladıkları kurye sözleşmesi kapsamında kurulan ticari ilişkiye istinaden, uygulama üzerinde açmış oldukları hesaptan istedikleri gün ve saatte faaliyet göstererek takip ettikleri siparişleri, ilgili market, restoran ve mağazalardan alıp trafik ve emniyet kurallarına uyumlu bir şekilde müşterilere teslim ederler.
    </div>
  </details>
  <details name="sss" open>
    <summary>
      <span class="bl-accordion-title">
        <bl-icon name="info" style="font-size: var(--bl-font-size-l)"></bl-icon>
        Nasıl Trendyol Go iş ortağı olunur?
      </span>
      <bl-icon name="arrow_down"></bl-icon>
    </summary>
    <div class="bl-accordion-content">
     Websitemizin içerisinde bulunan formu doldurarak gönder butonuna basılması gerekmektedir. Sözleşme işlemleri Trendyol Go ofislerinde tamamlanmaktadır. Ofisin uygun saatleri ve randevu ayarlanması konusunda Trendyol Go tarafından en kısa zamanda sizinle iletişime geçilecektir.</div>
  </details>
  <details name="sss">
    <summary>
      <span class="bl-accordion-title">
        <bl-icon name="info" style="font-size: var(--bl-font-size-l)"></bl-icon> Trendyol Go iş ortağı olmak için özel bir eğitim olacak mı?
      </span>
      <bl-icon name="arrow_down"></bl-icon>
    </summary>
    <div class="bl-accordion-content">Hayır, bu konuda özel bir eğitim faaliyeti bulunmamaktadır.  Taraflar arasındaki ticari ilişkinin koşullarının ve Trendyol Go faaliyet modelinin karşılıklı görüşümesi  ve Trendyol Go mobil uygulamasının kullanımıyla ilgili bilgi vermek amacıyla yüz yüze veya online bir görüşme yapılmaktadır. Bu görüşme için tarafına yönlendirme yapılacaktır. Bu görüşmede Trendyol Go ile faaliyetin sırasında iletişim kurabileceğin kanallar gibi faydalı bilgiler de bulunmaktadır.
    </div>
  </details>
  <details name="sss">
    <summary>
      <span class="bl-accordion-title">
        <bl-icon name="info" style="font-size: var(--bl-font-size-l)"></bl-icon> Trendyol Go iş ortağı olmak için araç tipi zorunluluğu bulunuyor mu?
      </span>
      <bl-icon name="arrow_down"></bl-icon>
    </summary>
    <div class="bl-accordion-content">Trendyol Go iş ortakları taşıma faaliyeti gösterecekleri motosikleti kendileri seçerler, herhangi bir araç tipi koşulu bulunmamaktadır.</div>
  </details>
  <details name="sss">
    <summary>
      <span class="bl-accordion-title">
        <bl-icon name="info" style="font-size: var(--bl-font-size-l)"></bl-icon> Trendyol Go iş ortağı olmak için araç tipi zorunluluğu bulunuyor mu?
      </span>
      <bl-icon name="arrow_down"></bl-icon>
    </summary>
    <div class="bl-accordion-content">Daha önce kurye sektöründe faaliyet göstermemiş olan kişiler de Trendyol Go iş ortağı olabilir.</div>
  </details>
</div>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/themes/default.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@beta/dist/baklava.js"></script>

.bl-accordion-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

details {
  font-size: 1rem;
  margin: 0 auto;
  width: 100%;
  border-radius: 8px;
  position: relative;
  max-width: 600px;
  min-height: 48px;
  transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 8px;
  border: 1px solid var(--bl-color-neutral-lighter);
  background-color: var(--bl-color-neutral-full);
}

details[open] {
  min-height: 120px;
}

details[open] .bl-accordion-title {
  min-height: 0px;
  height: auto;
}

summary {
  user-select: none;
  cursor: pointer;
  font-weight: var(--bl-font-display-medium);
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 16px;
  align-items: center;
  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 8px;
}

summary > bl-icon {
  transform: rotate(0deg);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

details[open] summary > bl-icon {
  transform: rotate(180deg);
}

summary:hover{
  background-color: var(--bl-color-neutral-lightest);
}

details[open] summary:hover {
  border-radius: 8px 8px 0 0;
}

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

.bl-accordion-title {
  color: var(--bl-color-neutral-darker);
  width: 90%;
  transition: all 250ms ease-in-out;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bl-accordion-content {
  background-color: var(--neutral-full);
  padding: 16px;
  font-weight: 300;
  line-height: 1.5;
  border-radius: 0 0 8px 8px;
}

.expand-icon {
  pointer-events: none;
  position: absolute;
  right: 1em;
  transition: all 150ms ease-out;
}



















html {
  font-size: 14px;
  font-family: var(--bl-font-family);
  font-weight: var(--bl-font-display-medium);
}

body {
  height: 100%;
  background: var(--bl-color-neutral-lightest);
  margin-top: 40px;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}


h1 {
  font-size: 48px;
}

h1, h2 {
  text-align: center;
  margin-bottom: 10px;
  margin-top: 30px;
}

p {
  text-align: center;
  margin-bottom: 20px;
}

.browser {
  display: flex;
  justify-content: center;
}

.browser img {
  width: 16px;
  height: 16px;
  margin: 0 8px;
}